HTML / CSS

【HTML/CSS】ズラし二重枠線のボックスを作る

めだま

cssの擬似要素を使って二重枠線のボックスを作ってみる

方法

boxとなるdiv要素に1つ目のborderを設定
そのdiv要素の擬似要素 (::after) に2つ目のborderを設定する

1. 普通の二重枠線ボックス

<div class="double-border-box">
  コンテンツが入ります。コンテンツが入ります。<br>
  コンテンツが入ります。コンテンツが入ります。<br>
  コンテンツが入ります。コンテンツが入ります。
</div>

<style>
  .double-border-box {
      color: #7f7f80;
      position: relative;
      padding: 20px;
      border: 1px solid #7f7f80;
  }

  .double-border-box::after {
      content: '';
      border: 1px solid #7f7f80;
      position: absolute;
      top: -10px;
      right: -10px;
      width: calc(100% + 20px);
      height: calc(100% + 20px);
  }
</style>

  • DEMO
コンテンツが入ります。コンテンツが入ります。
コンテンツが入ります。コンテンツが入ります。
コンテンツが入ります。コンテンツが入ります。

2. 右下にズラした二重ボックス

少しずらして小洒落た感じにしてみる

<div class="double-border-box-2">
  コンテンツが入ります。コンテンツが入ります<br>
  コンテンツが入ります。コンテンツが入ります。<br>
  コンテンツが入ります。コンテンツが入ります。
</div>

<style>
  .double-border-box-2 {
      text-align: center;
      color: #7f7f80;
      position: relative;
      padding: 20px;
      border: 1px solid #7f7f80;
  }

  .double-border-box-2::after {
      content: '';
      border: 1px solid #7f7f80;
      position: absolute;
      top: 10px;
      right: -10px;
      width: 100%;
      height: 100%;
  }
</style>

  • DEMO
コンテンツが入ります。コンテンツが入ります
コンテンツが入ります。コンテンツが入ります。
コンテンツが入ります。コンテンツが入ります。

\ 案件のご依頼・ご相談はこちらから /