【初心者でもわかる】CSSで「ひし形」「角丸のひし形」の作り方

どうも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制作のちょいテク詰め合わせ