• web制作

【CSS】六芒星の描き方【きっと便利】

大和田
このエントリーをはてなブックマークに追加

サイトを制作していると六芒星を描かなければならない時があるかもしれません。
そんな時のために、CSSを利用して描く方法を探してみました。

三角形を二つ合わせて六芒星を作る

HTML

<div class="san">
<div class="san1"></div>
<div class="san2"></div>
</div>

とりあえず場所を作って

CSS

.san{
  margin-left:50px;
  position:absolute;
}
.san1{
  width: 0;
  height: 0;
  border:50px solid transparent;
  border-bottom:80px solid;
  position:relativee;
}
.san2{
  width: 0;
  height: 0;
  border:50px solid transparent;
  border-top:80px solid;
  position:relative;bottom:55px;
}

ボーダーを使って作った三角形を重ねます。
san

・・・何か違いますね。

線を重ねて六芒星を作る

HTML

<div class="tri">
<div class="tri1">
</div>
<div class="tri2">
</div>
<div class="tri3">
</div>
</div>

とりあえずまた場所を作って

CSS


.tri{
margin:100px ;
position:absolute;
}
.tri1{
width:100px;
height:56px;
border-bottom:1px solid ;
transform:rotate(60deg);
border-top:1px solid;
position:absolute;
}
.tri2{
width:100px;
height:56px;
border-bottom:1px solid ;
transform:rotate(-60deg);
border-top:1px solid;
position:absolute;
}
.tri3{
width:100px;
height:56px;
border-bottom:1px solid ;
border-top:1px solid;
position:absolute;
}

borderで引いた線を斜めに配置していきます。
tri
おっと、それっぽいです!
さらに色をつけてみましょう。(borderにgold追加)
trigold
いい感じですね。お疲れ様でした。

サイズを変えようとすると、いろいろな調整を加えなければならないので
コピペしても全く使えないのが玉にキズですね。

決闘者用

外側に二重の円と背景に色を追加します。

HTML

<div class="triback">
<div class="tri">
<div class="tri1"></div>
<div class="tri2"></div>
<div class="tri3"></div>
<div class="maruuti"></div>
<div class="marusoto"></div>
</div>
</div>

CSS

.tri{
margin:100px ;
position:absolute;
}
.triback{
width:300px;
height:300px;
background:#191e58;
}
.tri1{
width:100px;
height:56px;
border-bottom:1px solid gold;
transform:rotate(60deg);
border-top:1px solid gold;
position:absolute;
}
.tri2{
width:100px;
height:56px;
border-bottom:1px solid gold;
transform:rotate(-60deg);
border-top:1px solid gold;
position:absolute;
}
.tri3{
width:100px;
height:56px;
border-bottom:1px solid gold;
border-top:1px solid gold;
position:absolute;
}
.maruuti{
border:1px solid gold;
border-radius:50%;
width:120px;
height:118px;
position:absolute;top:-30px;left:-11px;
}
.marusoto{
border:1px solid gold;
border-radius:50%;
width:160px;
height:160px;
position:absolute;top:-52px;left:-31px;
}

こうなって
iroari
さらにphotshopを駆使し模様を加えれば!!
rokubousei
これで完璧ですね。

なぁにこれぇ?

rss登録
このエントリーをはてなブックマークに追加