[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック

シンプルなHTMLで、シャドウを加えたギザギザのかわいいボーダーをつくるスタイルシートのテクニックを紹介します。

実際の動作は、下記ページで確認できます。

Jagged Border

HTML

まずは、デモのHTMLから。
デモは3つのギザギザがあるので、3つのdivを使用します。

<div class="jagged-wrap-inner">
  <div class="offset"></div>
  <div class="lightgray-bg jagged-border"></div>
  <div class="white-bg jagged-border"></div>
  <div class="darkgray-bg jagged-border"></div>
</div>

ギザギザを一つにした最小限のセットは、こんな感じです。

<div class="jagged-wrap-inner">
  <div class="offset"></div>
  <div class="lightgray-bg jagged-border"></div>
</div>

CSS

まずは、各divの境にあるシャドウを設定します。

.jagged-border {
  position: relative;
  width: 100%;
  height: 50px;
  -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px);
  filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px);
}
.jagged-border:before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  width: 100%;
  height: 10px;
}

ギザギザのスタイルはlinear-gradientでグラデーションを45度の角度で設定します。

.lightgray-bg {
  background: #ECF0F1;
}
.lightgray-bg:before {
  background: -webkit-linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%);
  background: linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%);
  -webkit-background-size: 20px 40px;
  background-size: 20px 40px;
}
.white-bg {
  background: #FFF;
}
.white-bg:before {
  background: -webkit-linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%);
  background: linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%);
  -webkit-background-size: 20px 40px;
  background-size: 20px 40px;
}
.darkgray-bg {
  background: #C3C9CC;
}
.darkgray-bg:before {
  background: -webkit-linear-gradient(45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%);
  background: linear-gradient(45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%);
  -webkit-background-size: 20px 40px;
  background-size: 20px 40px;
}