【CSS】で画像を使わずハートを作る方法
1213
この記事を書いている人
夫がこんな感じのヘアスタイルをしています。
いつの頃からか、5歳の娘が「ハート作ってる」というようになりました。
我が家では笑いの種になっています。
確かに・・・と思いまして
と、余談はここまでにして…
早速CSSでハートが作れるのか試していきましょう
CSSでハートが作れるのか
ハートを分解すると、2つの形を合わせると作ることができそうです。
こんな形を作成して、重ねる！
border-radiusを使用して、角丸長方形を作り、少し角度をずらせば良いですね
ということで、コードを見ていきましょう。
ハートを作るHTML・ CSSコード
<div class="heart"></div>.heart {
width: 120px;
height: 120px;
position: relative;
}
.heart::before,.heart::after {
content: "";
position: absolute;
top: 0;
width: 60px;
height: 100px;
background: #97d9e1;
border-radius: 100px 100px 0 0;
}
.heart::before {
left: 60px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}border-radiusを4つ書くことで、左上・右上・右下・左下という順番での指定になります。
これで、上部だけ丸めの長方形を作成します。
transform: rotate();を使って角度を調整します。
それを合わせることでハートが作れます。
こんな感じの微かなグラデーションだったらつけることがよーく見ない限りは違和感なく付けられそうです。
.heart-c::before {
background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.heart-c::after {
background-image: linear-gradient(to bottom, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}同じグラデーションを「to top」と「to bottom」で付けてみました。
ぜひ試してみてくださいね。
いいなと思ったら
TAPしてね♡↓
WordPress標準カラムを横スクロールにする【CSS】カスタマイズコード 【CSS】ボーダーを使わないclip-pathで作る三角形
コメントは承認後に表示されます。