ボックス内にborderで破線を作る

2018年6月8日 | Web

ある案件でボックス内側に波線を作り、ボックスの角をドックイヤーにするという作業をしましたので備忘録を兼ねて掲載しておきます。掲載されているソースコードはコピーペースト、またはカスタムしてご自由にお使いください。

HTML


<div class="box">
                                    
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>

</div>

CSS



.box{
      position: relative;
      background: #D6BFB8;
      box-shadow: 0px 0px 0px 5px #D6BFB8;
      border: dashed 2px #ffffff;
      padding: 10px 15px;
      color: #454545;
      width: 100%;
}

.box:after{
      position: absolute;
      content: '';
      left: -7px;
      top: -7px;
      border-width: 0 0 15px 15px;
      border-style: solid;
      border-color: #fff #fff #D69986;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}