CSS Katsuya

CSSで色違いの2重線、3重線を作る方法

二重線

CSSで二重線をひく場合、通常、border-style: doubleを使います。

p{
  border-style: double;
}

単純な同一色で同一の太さの2重線をひく場合はこの方法で問題ないですが、例えば内線と外線の色を変えたり、それぞれ線の太さを変えたりすることは出来ません。
またborder-styleはダブルはありますが、トリプル、3重線はありません。
そこでborder:doubleを使わずに思い通りの2重線を付ける方法をご紹介します。

色違いの2重線、3重線を引く

今回の作り方は疑似要素のbeforeとafterを使います。

構成は下記のようになります。

2重線

  • 赤の線 ・・・ 普通のborder
  • 緑の線 ・・・ after(beforeでも可)

3重線

  • 赤の線 ・・・ 普通のborder
  • 緑の線 ・・・ before
  • 青の線 ・・・ after

See the Pen border-triple by Katsuya (@Katssssu) on CodePen.

赤の線は普通のborder指定です。
緑線と青線は疑似要素になります。top:2px、left:2pxは上と左の線間の隙間になります。width:calc(100%-6px)は全体の幅から6pxを引いた値をwidthに入れています。
これらの数値を変えることでいろいろな表現が作れます。

calc関数についての使い方はこちら

太さの違う2重線、3重線を引く

See the Pen border-width by Katsuya (@Katssssu) on CodePen.

線の隙間を変える

See the Pen border-space by Katsuya (@Katssssu) on CodePen.

線を重ねる

See the Pen border-overlap by Katsuya (@Katssssu) on CodePen.

疑似要素を使うとブラウザ間での差異も無くなりましたが、レンダリングエンジンの違いでまだ細かい違いはありますので気をつけてください。

RECOMMENDこちらの記事も人気です。