【CSS】1つのタグでストライプのボーダーの枠を作るメモ

• 2018年12月03日
• コーディング

一つのhtmlタグと画像を使わずにCSSだけで枠がストライプのデザインを表現したい！
いろいろ調べてあるにはあるんだけど、どれもしっくり来なかったので自分で作ってみた。

HTML

<div class="box-stripe">ストライプの枠のボックス</div>

CSS(SCSS)

.box-stripe{
  padding: 20px 25px;
  position: relative;
  &:before{
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    background: #fff;
    z-index: -1;
  }
  &:after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: repeating-linear-gradient(-45deg, #fff, #fff 3px, #94c7b4 0, #94c7b4 6px); 
    z-index: -2;
  }
}

DEMO

説明すると.box-stripeが大枠となるボックスの指定。

順番が逆になるけど、疑似要素の:afterで.box-stripeいっぱいにしましまを敷き詰めているイメージ。

そこから疑似要素の:beforeで内側に白い背景をposition: absolute;でしましまの上にかぶせてコンテンツ部分にする。
top: 5px; bottom: 5px; left: 5px; right: 5px; がしましまボーダーを表示させる枠の太さを指定。

しましま自体を太くしたい(間隔を空けたい)ならここをいじればOK。

&:after{
  background: repeating-linear-gradient(-45deg, #fff, #fff 3px, #000 0, #000 6px); 
}

• 2018年12月03日
• コーディング