CSS Tricks には、多くのCSSシェイプが表示されています。私は特に星に驚いています:
以下のCSSはどのようにこの形状を作成しますか?
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}
<div id="star-five"></div>
それをバラバラに分解しましょう:
黄色の境界線は実際には最終製品でtransparent
として設定されているため、表示されません。境界線がどのように見えるかを示すため、ここでは黄色になっています。
上でコメントしたように、 この答え は基本的な三角形の背後にあるアイデアを示しています。
Div自体:
<div id="star-five"></div>
:before
疑似要素を組み合わせることは、これと同じです。
<div id="star-five">
<div id="before"></div>
</div>
最後に、:after
疑似要素の組み合わせは次のようになります。
<div id="star-five">
<div id="before"></div>
<div id="after"></div>
</div>
次に、position: absolute;
を使用して各要素を正確に重ね、必要に応じてtransform
で回転させて、最終的な製品を取得します。
視覚化しましょう!
大きな境界線を使用して三角形を描くことができます。これはそこで行われていることです。次に、三角形を回転させて星型に配置します。