テキストボックスの四隅にCSSで『』囲み枠をつける方法

2022 10/13

10月 12, 2022 10月 13, 2022

メインビジュアルのキャッチコピーが目立つように、テキストボックスに「」囲み枠をつける。

今回は下記のようなボックスの四隅を、左上＆右下、右上&左下とそれぞれ違う色で囲う。
実際にいただいたカンプであったデザインです。

ボックスに
2色で囲み枠

2色で囲み枠ってどうすんの？💧って、ちょっと迷ったのですが、なんとかCSSで作れました✨
今後も、キャッチコピーなどの強調したいテキストのデザインに使えそうなので、忘備録を残します。

基本はボックスを囲むborder

テキスト

これは簡単。
borderを設定するだけです。

<div class="base">
    <p>テキスト</p>
</div>

.base{
    border: solid 2px #333;
}

応用で特定の辺だけに囲み線

左にだけ線を表示。見出しなどのデザインに向いています

これも良く見るデザイン。
border-leftやborder-bottomなど、特定の辺にだけ線を引けます。

<div class="left">
    <p>テキスト</p>
</div>

.left {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #333;
    background: #F2F2F2;
    border-left: solid 10px #F21D44;
}

シンプルかぎカッコ

テキスト

ここからちょっとややこしい。
親要素のdivにposition: relative;
そして疑似要素::beforeと::afterをそれぞれ、左上と右下に配置。
この疑似要素にwidthとheightを設定して、border-left等で線を引きます。
これでシンプルなかぎカッコは完成です！

<div class="brackets">
  <p>テキスト</p>
</div>

.brackets {
    position: relative;
    padding: 10px 20px;
    max-width: 100%;
    width: 120px;
    text-align: center;
    margin: 0 auto;
}
.brackets::before,
.brackets::after{ 
    content:'';
    width: 18px;
    height: 26px;
    position: absolute;
    display: inline-block;
}
.brackets::before{
    border-left: solid 1px #F21D44;
    border-top: solid 1px #F21D44;
    top:0;
    left: 0;
}
.brackets::after{
    border-right: solid 1px #F21D44;
    border-bottom: solid 1px #F21D44;
    bottom:0;
    right: 0;
}
.brackets p {
    margin: 0; 
    padding: 0;
}

四隅にかぎカッコ

インパクトが必要な
テキスト

いよいよ目的の2色で四隅を囲うデザインです。
上記の「シンプルなかぎカッコ」で2つのカッコは作れました。
今回は4つ必要なので、もう一つ大枠のdivを用意し、２つのdivにそれぞれ2つずつカッコをつくる設定にしました。

heightは％で指定し、上下のカッコが少し重なるようにしています。
レスポンシブ対応にするには、pxで高さを固定できないからです。
この辺の調整を細かくしないと、画面幅によっては上下の枠が離れてしまので、ここがちょっと面倒でした。

<div class="copy-wrapper">
   <p class="copy">
      キャッチコピーなどインパクトが必要なテキスト
   </p>
</div>

.copy-wrapper {
    margin: 10px auto 48px;
    max-width: 100%;
    width: 460px;
    position: relative;
}
.copy-wrapper::before,
.copy-wrapper::after {
        position: absolute;
        content: "";
        width: 100px;
        height: 83%;
}
.copy-wrapper::before {
    border-left: solid 30px #EE8B1D;
    border-bottom: solid 30px #EE8B1D;
    bottom:  -30px;
    left:  -30px;
}
.copy-wrapper::after {
    border-right: solid 30px #EE8B1D;
    border-top: solid 30px #EE8B1D;
    top: -30px;
    right: -30px;
}
.copy {
    font-size: 34px;
    font-weight: bold;
    line-height: 2;
    color: #0D0D0D;
    letter-spacing: 0.1em;
    text-align: center;
    max-width: 460px;
    width: 100%;
    padding: 20px 20px;
    position: relative;
    box-sizing: border-box;
    }
.copy::before,
.copy::after {
        position: absolute;
        content: "";
        width: 180px;
        height: 53%;
    }
.copy::before {
    border-left: solid 30px #F21D44;
    border-top: solid 30px #F21D44;
    top:  -30px;
    left:  -30px;
}
.copy::after {
    border-right: solid 30px #F21D44;
    border-bottom: solid 30px #F21D44;
    bottom: -30px;
    right: -30px;
}