shikaの雑記ブログ

web系エンジニアの雑記ブログ

技術

2重線が重なり合うスタイルを組むには(No 画像, Yes CSS!)

投稿日:

この画像のように、2重線が少しズレて重なっている枠線の実装に迫られましたが、
通常のborderbox-shadowを少しずつずらせばcssのみで実現できました。
画像も疑似要素も使用してませんよ!!

htmlはごくシンプル。

<div class="box">ここにテキストが入ります。</div>

構造をわかりやすくするために、ここでは枠線の色を3色に塗り替えています。

  body {
    background-color: #000;
  }
  .box {
    padding: 30px;
    color: #fff;
    border: 1px solid #caa851; //(1)中央の黄色い枠線
    box-shadow: 
                3px 2px 0 1px #000, //(2)右下の赤線を覆う枠線(背景色)
                3px 2px 0 2px red,  //(2)右下の赤い枠線
                -3px -2px 0 1px #000, //(3)左上の青線を覆う枠線(背景色)
                -3px -2px 0 2px blue; //(3)左上の青い枠線
  }

(1)の中央枠線から、(2)右下・(3)左上にそれぞれズラしたbox-shadowでさらに覆うことで2重の枠線っぽく描画しています。

参考サイト

CSSで2重線を付ける方法と注意点

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

クロスドメイン制約を回避するChromeショートカットを作る

No 'Access-Control-Allow-Origin' header is present on the requested resource. のエラーのせいでドメイン …

住所と緯度経度を教えてくれるChatbot作った

G suiteアカウント向けにリリースされたHangouts Chatでは、誰でも簡単にbotが作れちゃうとか。 せっかくなんで何か社内業務に課題でもないかガサ入れしていたら、 「ある施設の緯度と経度 …

jQueryにてリンク先のドメインを一括置換

htmlのaタグ内に設定された特定のドメイン部分のみを、 開発サーバなど別環境に設置されている時にはその時のドメインに後から置換する、という処理を要求されたので locationやreplaceやRe …

schtasks.exe – コマンドを時刻指定して実行する

1日の業務の中で決まった時刻に特定のコマンドを実行したい場合には、タスクスケジューラで登録すると便利です。 手順と概略 Windowsではタスクスケジューラとして schtasks.exe が用意され …

jsでメール本文の初期値を設定

メールリンクをクリックしてメーラーを起動した際に、 メール件名や本文、BCCが初期値として入力させるには <a href="mailto:mail@sample.com?bcc=tes …