CSS は数値ラベルのスタイルを実装します

韦小宝

リリース： 2018-03-14 12:48:19

オリジナル

7246 人が閲覧しました

ショッピングサイトや小説サイトにアクセスすると、商品や小説の表紙の横にランキングや人気のサインが表示されていることがあります。そこで、今日はこれらのサインを実装する方法について話しましょう。

ランキングラベルスタイルのCSS実装

CSS は数値ラベルのスタイルを実装します

つまり、

CSS は数値ラベルのスタイルを実装します

私の実装プロセスを主に以下の手順で紹介します:

初期実装方法(失敗)
その後の実装方法(成功)
オリジナルのWebページ実装方法

1.最初の実装方法

このスタイルを見て、最初に思いついたのは、 CSS を使用できるはずです。これを実現する方法は、幅と高さが固定された赤い p を用意し、その下に白い三角形を追加して赤い p の下部をカバーすることです。しかし、最終的な効果を見ると、次のようになります。

CSS は数値ラベルのスタイルを実装します

ここでの問題は、三角形が後ろの絵を覆ってしまい、奇妙に見えることであることがわかりました。したがって、最初に思いつく解決策は、z-index のサイズを調整してレベルを変更することです。まず、赤色の p の z-index が画像の z-index より大きくなければなりません。三角形は絵を見せることができますが、赤い p を覆うことができてはなりません。したがって、これは機能しません。

2. 描画方法を変更します

上記の方法は機能しないので、下の白い三角形ではなく、両側の小さな赤い三角形を描画すると、赤い三角形の高さが減少することがわかります。 p を選択してスプライスすると、上記のスタイルを完成させて画像を公開できます。 CSSコード的には、

.trangle {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 10px solid #fff;
}

ログイン後にコピー

を、

.trangle {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 10px solid #fff;
}

ログイン後にコピー

CSS は数値ラベルのスタイルを実装します
に変更するだけで、効果が得られることがわかります。したがって、CSS を使用してこのようなグラフィックを記述する場合、通常は複数の方法があり、実装方法をさらに検討する必要があります。

3. 元の Web ページを実現する

Google F12 を使用して元の Web ページを実現すると、元の Web ページのランキングラベルが画像であることがわかりました...

関連するおすすめ:

css3 ストリップの実現パーセンテージ効果の詳しい説明

css3shadow

以上がCSS は数値ラベルのスタイルを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。