0

私はデス メタルのプロモーション用の Web サイトを作成していて、境界線属性を使用して CSS3 で五芒星を作成できるかどうか疑問に思っていました。6 ポイントの星を作ることが可能であると信じさせるいくつかの参照を見つけることができましたが、数時間の精神的苦痛の後、5 ポイントの星を作ることをあきらめました。これは可能ですか？

ヘキサグラムは 2 つの三角形で構成されており、css3 が次のコードでそれを実現する方法は次のとおりです。

#six-point-star {
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-bottom: 80px solid black;
}
#six-point-star:after {
   content:"";
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-top: 80px solid black;
   margin: 30px 0 0 -50px;
}

ただし、5 つのポイントを使用すると混乱を招きます。これは、より小さなポリゴンに分割できないためです。これをどのように実装できるかについての知識は素晴らしいでしょう。

http://jsfiddle.net/8FjL2/1/

http://www.skinit.com/assets/seo/jumbo_shot/jumbo_shot50039084/pentagram.jpg

4

2 に答える 2

3

ここで質問されたことの解決策

フィドル

<div id="pentagram"></div>

#pentagram {
  position: absolute;
   width: 0; 
   height: 0; 
   border-right: 120px solid transparent; 
   border-left: 120px solid transparent; 
   border-bottom: 80px solid black;
  top:100px;
  left:50px;  
}
#pentagram:before {
  content: "";
  position: absolute;
   width: 0; 
   height: 0; 
   border-right: 120px solid transparent; 
   border-left: 120px solid transparent; 
   border-top: 80px solid black;
  -webkit-transform: rotate(34deg);
  margin:6px 0 0 -122px;
}

#pentagram:after {
  content: "";
  position: absolute;
   width: 0; 
   height: 0; 
   border-top: 120px solid transparent; 
   border-bottom: 120px solid transparent; 
   border-right: 80px solid black;
  -webkit-transform: rotate(15deg);
  margin:-74px 0 0 -42px;
}
于 2013-01-15T05:38:54.547 に答える