どうも7noteです。CSSでひし形を作ります。
CSSだけで様々な図形を作れるとなにかと便利です。
ひし形の作り方を紹介していきます。
トランプのダイヤにも使えますね。
ソース
<span class="diamond"></span>
style.css
.diamond {
width: 30px;
height: 30px;
background: #f00; /* 背景色の場合、指定 */
border: 1px solid #000; /* 線描画の場合、指定 */
border-radius: 5px; /* 角丸にしたい場合、指定 */
display: inline-block;
transform: rotate(45deg)
skew(
calc((90deg - 60deg) / 2), /* ダイヤ型の角度を変更する */
calc((90deg - 60deg) / 2) /* ダイヤ型の角度を変更する */
);
}
まとめ
四角形を作成し、transformで回転&傾斜をつけてダイヤ型になります。
結構簡単に作れるので疑似要素として表示させて組み合わせたり、2つ使ってキラキラさせた表現を作ったりもできそうですね。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ
↧