web-dev-qa-db-ja.com

純粋なCSS星形

CSS Tricks には、多くのCSSシェイプが表示されています。私は特に星に驚いています：

Star image

以下の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>
csscss-shapes
22
Saswat

それをバラバラに分解しましょう：

黄色の境界線は実際には最終製品でtransparentとして設定されているため、表示されません。境界線がどのように見えるかを示すため、ここでは黄色になっています。

上でコメントしたように、 この答え は基本的な三角形の背後にあるアイデアを示しています。

Div自体：

<div id="star-five"></div>

Piece one

:before疑似要素を組み合わせることは、これと同じです。

<div id="star-five">
    <div id="before"></div>
</div>

Piece two

最後に、:after疑似要素の組み合わせは次のようになります。

<div id="star-five">
    <div id="before"></div>

    <div id="after"></div>
</div>

Piece three

次に、position: absolute;を使用して各要素を正確に重ね、必要に応じてtransformで回転させて、最終的な製品を取得します。

Final product

視覚化しましょう！

Animation

53
misterManSam

大きな境界線を使用して三角形を描くことができます。これはそこで行われていることです。次に、三角形を回転させて星型に配置します。

0
rdoyle720