MENU

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

一つの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); 
}

nanimonai

プログラム書く方が楽しいデザイナーです。デザイン事務所→フリーランス→スタートアップ入社→フリーランス(現在)。 全然更新しないのでブログは向いてないと思いつつなんとかやってます。 よければTwitterのフォローもお願いします。

カテゴリー

キーワード

デザインに必須のフリー素材サイト



関連記事