スター(グラデーション)
.
設計図
【html】 <div class="sample42"></div>
【css】.sample42{
width:110px;
height:104px;
display:inline-block;
background-image:
linear-gradient(108deg,#fff 13px,transparent 0),
linear-gradient(-36deg,#fff 36px,transparent 0),
linear-gradient(140deg,#fff 31px,transparent 0),
linear-gradient(36deg,#fff 20px,transparent 0),
linear-gradient(108deg,#fff 12.5px,transparent 0),
linear-gradient(-125deg,#fff 42px,transparent 0),
linear-gradient(-36deg,#fff 20px,transparent 0),
/*ここまで左半分↑↓ここから右半分*/
linear-gradient(-108deg,#fff 13px,transparent 0),
linear-gradient(36deg,#fff 36px,transparent 0),
linear-gradient(-140deg,#fff 31px,transparent 0),
linear-gradient(-36deg,#fff 20px,transparent 0),
linear-gradient(-108deg,#fff 12.5px,transparent 0),
linear-gradient(125deg,#fff 42px,transparent 0),
linear-gradient(36deg,#fff 20px,transparent 0),
/*↓ここからグラデーション*/
linear-gradient(144deg,#d91 22%,#fd0 35%,#ffc 50%,#fd0 65%,#d91 92%);
background-position:
42px -2px,42px 40px,0 0,0 64px,21px 64px,21px 64px,55px 0,
/*ここまで左半分↑↓ここから右半分*/
68px -2px,68px 40px,0 0,0 64px,89px 64px,89px 64px,55px 0,0 0;
}
※リンクボタンにする場合リンク文字【html】<center><a href="URL" class="sample42A">リンク文字</a></center>
【css】.sample42A{
display:inline-block;/*a要素に幅と高さを指定する時に必要*/
width:110px;
height:104px;
color:#630;/*リンク文字の色(茶色)*/
font-weight:bold;/*リンク文字を太字に*/
text-decoration:none;/*リンク文字の下線を消す*/
line-height:100px;/*リンク文字を中央に(縦方向)*/
text-align:center;/*リンク文字を中央に(横方向)*/
background-image:
linear-gradient(108deg,#fff 13px,transparent 0),
linear-gradient(-36deg,#fff 36px,transparent 0),
linear-gradient(140deg,#fff 31px,transparent 0),
linear-gradient(36deg,#fff 20px,transparent 0),
linear-gradient(108deg,#fff 12.5px,transparent 0),
linear-gradient(-125deg,#fff 42px,transparent 0),
linear-gradient(-36deg,#fff 20px,transparent 0),
/*ここまで左半分↑↓ここから右半分*/
linear-gradient(-108deg,#fff 13px,transparent 0),
linear-gradient(36deg,#fff 36px,transparent 0),
linear-gradient(-140deg,#fff 31px,transparent 0),
linear-gradient(-36deg,#fff 20px,transparent 0),
linear-gradient(-108deg,#fff 12.5px,transparent 0),
linear-gradient(125deg,#fff 42px,transparent 0),
linear-gradient(36deg,#fff 20px,transparent 0),
/*↓ここからグラデーション*/
linear-gradient(144deg,#d91 22%,#fd0 35%,#ffc 50%,#fd0 65%,#d91 92%);
background-position:
42px -2px,42px 40px,0 0,0 64px,21px 64px,21px 64px,55px 0,
/*ここまで左半分↑↓ここから右半分*/
68px -2px,68px 40px,0 0,0 64px,89px 64px,89px 64px,55px 0,0 0;
}
pxの値がなるべく小数にならないよう、background-sizeを『100px 106px』→『104px 110px』に変更しました。(2023.12.26)
TOP≫SUB≫CSS実験室
*前←22→次#