スター(一筆書き)
.
設計図
【html】
<div class="sample44"></div>
【css】
.sample44{
width:110px;
height:106px;
margin:0 auto;/*中央寄せ*/
background-image:
linear-gradient(0deg,#fc0 2px,transparent 2px),
linear-gradient(36deg,transparent 51px,#fc0 51px,#fc0 53px,transparent 51px),
linear-gradient(72deg,transparent 31px,#fc0 31px,#fc0 33px,transparent 33px),
linear-gradient(-72deg,transparent 31px,#fc0 31px,#fc0 33px,transparent 33px),
linear-gradient(-36deg,transparent 51px,#fc0 51px,#fc0 53px,transparent 53px);
background-position:0 41px,0 0,55px 0,55px 0,0 0;
}

※リンクボタンにする場合
リンク文字
【html】
<center><a href="URL" class="sample44A">リンク文字</a></center>
【css】
.sample44A{
display:inline-block;/*a要素に幅と高さを指定する時に必要*/
width:106px;
height:100px;
color:#666;/*リンク文字の色*/
font-weight:bold;/*リンク文字を太字に*/
text-decoration:none;/*リンク文字の下線を消す*/
line-height:100px;/*リンク文字を中央に(縦方向)*/
text-align:center;/*リンク文字を中央に(横方向)*/
background-image:
linear-gradient(0deg,#fc0 2px,transparent 2px),
linear-gradient(36deg,transparent 51px,#fc0 51px,#fc0 53px,transparent 51px),
linear-gradient(72deg,transparent 31px,#fc0 31px,#fc0 33px,transparent 33px),
linear-gradient(-72deg,transparent 31px,#fc0 31px,#fc0 33px,transparent 33px),
linear-gradient(-36deg,transparent 51px,#fc0 51px,#fc0 53px,transparent 53px);
background-position:0 41px,0 0,55px 0,55px 0,0 0;
}

pxの値が小数にならないよう、background-sizeを『106px 100px』→『110px 104px』に変更しました(2023.12.25)。

TOPSUBCSS実験室

*前26次#

×
「#エロ」のBL小説を読む
BL小説 BLove
- ナノ -