CSSを使ったカミナリマークの作り方

どうも7noteです。カミナリマークの作り方

cssを使って、カミナリマークを作ります。

ソース

index.html

<div class="thunder"></div>

style.css

.thunder {
  position: relative; /* 基準位置とする */
  width: 15px;        /* 適当な幅を指定 */
  height: 35px;       /* 適当な高さを指定 */
}

.thunder::before,
.thunder::after {
  content: "";  /* 疑似要素に必須 */
  width: 10px;  /* 三角の幅を指定 */
  height: 20px; /* 三角の高さを指定 */
  display: inline-block; /* インラインブロック要素にする */
  position: absolute; /* 相対位置に指定 */
  transform: skewX(-10deg); /* マイナス10度傾ける */
}

.thunder::before {
  background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #FADD7A 50.5%) no-repeat top left/100% 100%; /* 直角三角形を作る */
  bottom: 0; /* 下から0pxの位置に配置 */
  right: 0;  /* 右から0pxの位置に配置 */
}

.thunder::after {
  background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #FADD7A 50.5%) no-repeat top left/100% 100%; /* 直角三角形を作る */
  top: 0;  /* 上から0pxの位置に配置 */
  left: 0; /* 左から0pxの位置に配置 */
}

解説

二つの三角形を作って再現します。
今回三角形は二つとも擬似要素を使って表現しています。

カミナリのサイズを決めれば、擬似要素で三角形を作っていきます。
borderではなく背景色を使った方法で三角形を作っています。

色をつけて配置を調整すれば完成。

まとめ

比較的簡単に再現する事が可能です。
webサイトで使うことはあまり無いかもしれませんが、三角形を組み合わせた図形を作る方法は応用することで好きな形をつくることができると思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ