[CSS] 擬似要素を使用して、baidu 学校の特別なグラフィックを実現します recruit_html/css

[CSS] 擬似要素を使用して、baidu 学校の特別なグラフィックを実現します recruit_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:56:08

オリジナル

1112 人が閲覧しました

最近、ブログガーデンの誰かが投稿した Baidu スクールの採用に関する質問を目にしました。次のグラフィックを実現するには 1 行の HTML コードを使用する必要があると書かれています:

指定された HTML コードは:

----------------------- 上記は背景です ----------- ---- ---------------

もちろん正方形は簡単に作れますが、右側に突き出た小さな角のマークは自分で考えなければなりません。したがって、そのようなものはないので、CSS で疑似要素を使用するのが自然です。

この形状は、私たちがよく遭遇する小さなバブルやドロップダウンバーに似ています

通常、画像リソースを追加するだけでなく、HTMLも変更する必要があります。構造。

CSS擬似要素

CSSには4つの擬似要素、つまりfirst-line、:first-letter、:before、:afterがあります。最初の 2 つはそれぞれテキストの最初の行とターゲット要素の最初の文字を選択し、それらに追加のスタイルを追加できます。

最も一般的に使用されるのは、:before と :after です。これら 2 つの疑似要素は、最初の 2 つとは使用方法が異なり、より便利です。

:before,:after は、それぞれ現在の要素の前後に指定した内容を追加するために使用されます。具体的な使用例は次のとおりです。

<!doctype html><html><head><meta charset="utf-8"><title>CSS输出各种图形</title><style type="text/css">    p:before{        content:"开始";        color:#F00;        font-size:12px;    }    p:after{        content:"结束";        color:#003;        font-size:30px;        border:1px solid #000;        width:100px;    }</style></head><body>            <p>伪元素 测试</p></body></html>

ログイン後にコピー

上記のコードの実行結果は図のようになります。

:before と: after の 2 つの擬似要素は、現在の p タグの前後に追加される 2 つの要素であると考えられますが、p:after に記述された width:100px; が機能しないこともわかるはずです。は、擬似要素の表示がインラインであり、ブロックではないことを示しています。

疑似要素に関しては、注意すべき点がいくつかあります:

1. 疑似要素は要素内にインラインで表示されるため、上記の質問のように疑似要素を使用してより多くの効果を実現したい場合を使用するには、疑似要素をブロック要素として扱う必要があります。

2. 擬似要素リスト属性の内容は必須であり、内容が空であっても空にすることはできません。そうでない場合は表示されません。

3. テキストに加えて、疑似要素のコンテンツを p:before{content:url(icon.gif);} などの画像に設定することもできます

4. 疑似要素は現在 IE8 以降でサポートされていますブラウザなら安心してご利用いただけます。

CSSを使って三角形やその他の形状を作成します

疑似要素をマスターすると、上記の質問を達成できます。明らかに、三角形は疑似要素によって作成されます。どうやってするの？

CSS コードで三角形を実装するのは非常に簡単です。試してから書くことができます:、HTML コードは

、CSS コードは次のとおりです

.trangle{width:0;height :0;border:40px Solid; border-color:transparent 透明な透明 #F00;}

他の形状も同様で、異なる border-radius と border-width を設定することで実現できますが、互換性の問題がありますが、IE9 以降では正常です (当然、境界半径の問題です)。

しかし、要素が枠線で囲まれていることがわかりますが、質問の三角形には黒い枠線が付いています。明らかに、1 つの疑似要素では実行できないため、2 つを組み合わせて使用します。

擬似要素のposition:absolute属性とz-index属性を設定することで、下層が黒、上層が白の擬似要素の重ね合わせが形成されます。

元の質問の具体的な CSS 実装コードは次のとおりです:

.square{width:100px;height:100px;background-color:#FFF;position:relative;border:2px #000000 solid;}.square:before{content:"";width:0px;height:0px;display:block;position:absolute;z-index:2;top:25%;right:-28px;border:15px solid #FFF;border-color:transparent transparent transparent #FFF;}.square:after{content:"";width:0px;height:0px;display:block;position:absolute;z-index:1;top:25%;right:-30px;border:15px solid #FFF;border-color:transparent transparent transparent #000;}

ログイン後にコピー

もちろん、次の 2 つのような、より複雑なグラフィックを実装することもできます。 (左側の太極拳はスクリーンショットと右側のペプシは、「まあ、それがそれを使用する方法です。

--------------------------------終わりました-------------- --------------------

3年生になると、授業も減り、外注も減って、本を読んだり、面白いものを書いたりすることしかありません。来年のインターンシップ募集に向けて基礎を固めていきます。