KuzLog

KuzLog
2017/03/17 2018/10/22 Web制作

CSSのみでジグザグな枠線(境界線)を作る方法

そろそろ「またCSSネタかよ!」っていうツッコミが入りそうですが、今日も懲りずに新しく仕入れたテクニックを紹介します。今回は割と実用的です(重要)

まずはサンプルを

そもそもジグザグな枠線(境界線)とはなんぞや?って人もいるかと思うので、とりあえずサンプルをご覧ください。

See the Pen ZigZag by Kuzlog (@Kuzlog) on CodePen.

こういうギザギザした境界線って結構見ますよね?この程度なら、わざわざ画像を用意しなくてもCSSだけで再現可能です。

HTMLもこれだけ。シンプル!

CSSはやや複雑ですが、ひとつひとつ読んでいけば簡単な部類だと思います。多分。

仕組み

上部のジグザグを一部分だけ切り抜いて見ると、こんな感じになっています。

斜めのbackground: linear-gradient()を2つ使うのがポイント。これをずらーっと横一列に並べると、ギザギザな境界線になるという仕組みです。

サンプルでは影も付けていますが、box-shadowだと影が20x20pxのサイズで描画されてしまうので、filter:drop-shadow()を使っています。
filter:drop-shadow()についてはこちらの記事を参考にどうぞ。

以上、ジグザグな境界線の作り方でした。