スターボタンの作り方
最初にhtmlに<a href="" class="star">リンク文字</a>
と記述しておきます。
今回作る星の高さは100pxです。
説明をわかりやすくするために、隣り合う頂点を結んだ長さを2a、星の横幅を2bと定義します。(aとbが何pxになるかは後述)隣り合う星の先端を結んでいくと正五角形になります。正五角形の内角は180°×3÷5=108°です。灰色の三角形に着目すると中心角108°の二等辺三角形になっているので、残りの角は36°と36°です。また、星の尖った部分は108°-(36°×2)=36°です。
まずは下図の赤い部分を作ります。
三角形の直角の位置が基準点となりますが、これは下の枠線の中点になります。そこから-72degのlinear-gradientを描いていきます。この赤い三角形は内角が18°、72°、90°になり、底辺=a、高さ=100です。よって
a=100×tan18°=32.4919696…≒32.5
です。
また、赤い三角形の斜辺を底と見た時の高さ(基準点までの距離)は、100×sin18=30.9です。
よって.star{
border:solid 1px #ccc;/*枠線*/
display:inline-block;/*a要素に幅と高さを指定する時に必要*/
width:106px;
height:100px;
background-image:
linear-gradient(-72deg,#fc0 30.9px,transparent 30.9px);
background-position:/*基準点を右と下にずらす*/
53px 0px;}
と記述すると↓こうなります。
次に、下図のようにピンク色(実際は背景と同色)の三角形を重ねます。ピンクの三角形は内角が36°、72°、90°で、底辺=aです。
基準点は赤い三角形と同じく下の枠線の中点。ピンクの三角形の斜辺を底と見た時の高さはa×sin36°≒19.1。
よって.star{
border:solid 1px #ccc;/*枠線*/
display:inline-block;/*a要素に幅と高さを指定する時に必要*/
width:106px;
height:100px;
background-image:
linear-gradient(-36deg,#fff 19.1px,transparent 19.1px),
linear-gradient(-72deg,#fc0 30.9px,transparent 30.9px);
background-position:/*基準点を右と下にずらす*/
53px 0px,53px 0px;}
と記述すると↓こうなります。
次に、下図のように青の三角形を作ります。まずは基準点(直角の場所)を決めます。枠線左上からの距離ですが、右へは横幅の半分の53pxとすぐ出ます。下へはどれくらいでしょうか？水色の三角形は隣り合う星の先端を結び、青い三角形と一辺(=b)を共有する三角形です。
この水色の三角形は内角が36°、54°、90°になっており、斜辺の長さ=2aです。よって高さは
2a×sin36°≒38.2
となり、上の枠線から下へ38.2pxの位置となる事が求まりました。
また、この水色の三角形より、b=a×cos36°≒52.6
が求まります。よって星を囲う灰色の枠線の横幅は2b≒105.2で良いのですが、少し余裕を持たせて106px作っています。
青い三角形に話を戻します。
青い三角形は枠線左上から右へ53px、左へ38.2px移動した位置を基準点とし、-144degのlinear-gradientです。
青い三角形の斜辺を底と見た時に基準点までの距離(直角までの距離)は、b×sin36°≒30.9です。
よって.star{
border:solid 1px #ccc;/*枠線*/
display:inline-block;/*a要素に幅と高さを指定する時に必要*/
width:106px;
height:100px;
background-image:
linear-gradient(-144deg,#fc0 30.9px,transparent 30.9px),
linear-gradient(-36deg,#fff 19.1px,transparent 19.1px),
linear-gradient(-72deg,#fc0 30.9px,transparent 30.9px);
background-position:/*基準点を右と下にずらす*/
53px 38.2px,53px 0px,53px 0px;}
と記述すると↓こうなります。
右半分を同様に書いたり、ボタンリンクの見映えを良くするプロパティを書いたり、灰色の枠線を消したら完成です。
設計図
.star{
display:inline-block;/*a要素に幅と高さを指定する時に必要*/
width:106px;
height:100px;
color:#666;/*リンク文字の色*/
font-weight:bold;/*リンク文字を太字に*/
text-decoration:none;/*リンク文字の下線を消す*/
line-height:100px;/*リンク文字を中央に(縦方向)*/
background-image:
linear-gradient(-144deg,#fc0 30.9px,transparent 30.9px),
linear-gradient(144deg,#fc0 30.9px,transparent 30.9px),
linear-gradient(-36deg,#fff 19.1px,transparent 19.1px),
linear-gradient(36deg,#fff 19.1px,transparent 19.1px),
linear-gradient(-72deg,#fc0 30.9px,transparent 30.9px),
linear-gradient(72deg,#fc0 30.9px,transparent 30.9px);
background-position:/*基準点を右と下にずらす*/
53px 38.2px,53px 38.2px,53px 0px,53px 0px,53px 0px,53px 0px;}
完 成 ！
↑押すと前のページに戻ります。
TOP≫SUB≫CSS≫スター≫(黄色)≫作り方