cssで点線をデザインする

背景画像で点線を表現する

背景画像にこんな画像を指定して、デザイン要素が入った点線を描いている部分がありました。
[bg_dot.png]

dot-bg.scss

.dot-line {
  &:after {
    background: url(bg_dot.png) repeat-x 0 0;
    content: '';
    display: block;
    height: 6px;
    width: 100%;
  }
}

cssでborder-bottom: 6px dotted #ccc;などと指定しても、再現できません。
とはいえ、このためだけに画像を用意するのもなー・・・と思い、調べてみました。

radial-gradientで水玉の背景を描く

まずは、水玉模様の描き方を見つけました。
こちらの記事に、とても詳しく書かれています。
【CSS】radial-gradient を使って、CSS で水玉の背景を描いてみよー | HHH@venture | @venture = Adventure!

円形グラデーションはこんな活用法もあるとは！

水玉模様を描くコツとして、以下のことが挙げられています。

① radial-gradient の色の切り替え部分を計算しやすい数値にする。
② 上記①の比率で割り切れる background-size を指定する。
③ background-position は、玉の描画位置。

radial-gradientで点線を描いてみる

水玉模様を応用して、border-style: dotted;風の点線を描いてみました。

radial-gradient.scss

.dot-line {
  &:after {
    background: radial-gradient(circle farthest-side, #707070, #707070 60%, transparent 60%, transparent);
    background-size: 6px 6px;
    content: '';
    display: inline-block;
    height: 30px;
    width: 6px;
  }
}

画像を使わず、色や太さ、間隔などもcssで調整できるので、便利です！

border-style: dashed;の場合

border-style: dashed;の間隔を調整したい場合は、linear-gradientを利用します。

.dashed-line {
  &:after {
    background-image: linear-gradient(to right, #707070, #707070 20px, transparent 10px, transparent 10px);
    background-size: 30px 8px;
    background-repeat: repeat-x;
    content: '';
    display: inline-block;
    height: 10px;
    width: 100%;
  }
}

参照
dottedでもdashedでもない！CSSで好きな間隔の点線（破線）を作る方法 | amelog

余談

linear-gradientはマーカー的な下線を描く場合も便利です。（サンプル参照）

サンプル

まとめ

分かってしまえば「なるほどー！」と納得ですが、知らないとなかなか出てこないテクニック。
覚えておいて損はないと思います。
cssのグラデーションは、使い所が色々あって便利です。