ハートボタンの作り方．
最初にhtmlに<a href="" class="heart">リンク文字</a>
と記述しておきます。
今回作るハートの横幅は100pxです。それに合わせて縦も100pxにしました。
まずは左半分から作っていきます。
ピンクは半径25pxの円。
(二つ並べると、横幅の100pxになる。)
ピンクの円は赤い直角二等辺三角形の斜辺と接しています。
赤の直角部分を正方形の中心(background-position:50px 50px;)にくるようにし、ここを(x,y)=(0,0)と考えます。
赤の斜辺から直角までの長さは、
{25＋(25÷sin45°)}÷sin45°≒30.18≒30
また、ピンク円のy座標は
25÷sin45°≒17.68≒18
よって.heart{
border:solid 1px tan;/*枠線*/
display:inline-block;/*a要素に幅と高さを指定する時に必要*/
width:100px;
height:100px;
background-image:
linear-gradient(-135deg,pink 30px,transparent 0),
radial-gradient(pink 25px,transparent 0);
background-position:50px 50px,-25px -18px;
}
と記述すると↓こうなります。
同様に右半分も.heart{
border:solid 1px tan;/*枠線*/
display:inline-block;/*a要素に幅と高さを指定する時に必要*/
width:100px;
height:100px;
background-image:
linear-gradient(-135deg,pink 30px,transparent 0),
radial-gradient(pink 25px,transparent 0),
linear-gradient(135deg,pink 30px,transparent 0),
radial-gradient(pink 25px,transparent 0);
background-position:
50px 50px,-25px -18px,50px 50px,25px -18px;
}
と記述すると↓こうなります。
これだけだとハートの中心部に空白ができてしまうので、適当な半径(ピンク円のy座標の17.68px)の円で埋めます。不要な枠線を消したりリンク文字の見映えを良くするプロパティを入れたら完成です。
.heart{
display:inline-block;/*a要素に幅と高さを指定する時に必要*/
width:100px;
height:100px;
color:#c00;/*リンク文字の色(赤)*/
font-weight:bold;/*リンク文字を太字に*/
text-decoration:none;/*リンク文字の下線を消す*/
line-height:100px;/*リンク文字を中央に(縦方向)*/
text-align:center;/*リンク文字を中央に(横方向)*/
background-image:
linear-gradient(-135deg,pink 30px,transparent 0),
radial-gradient(pink 25px,transparent 0),
linear-gradient(135deg,pink 30px,transparent 0),
radial-gradient(pink 25px,transparent 0),
radial-gradient(pink 18px,transparent 0);
background-position:
50px 50px,-25px -18px,50px 50px,25px -18px,0px 0px;
}
完 成 ！
TOP≫SUB≫CSS≫ハート≫(ピンク)≫作り方