Loading...

Single Post

HOME > post > Web > ボックス内にborderで破線を作る

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

| Web
コーディング

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

HTML

[html]

<div class="box">

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

</div>

[/html]

CSS

[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);
}

[/css]

まとめ

ボックス内側の波線とドックイヤーは、ワンポイントのアクセントになってウェブサイトがオシャレに見えます。個人的には、カフェのウェブサイトのメニュー一覧ページ内のセットメニューなどで使っています。

関連記事

Contact Page