dedede ４隅がえぐれるあしらいをCSSで実装しよう
たまにデザインで見る、上図の様なあしらいをhtmlとcssだけで簡単に実装してみます。
できるだけ簡単な実装方法にしています。手順としては、
- 中身を囲むdiv要素を二つ作る。
- その２つに,それぞれ擬似要素をbefore,afterの計4つ作る。
- 擬似要素に背景と同じ丸を作って、z-indexで上にする。
- ４隅に配置する。
実装方法
HTML
基本的な考え方は、上記のように、before擬似要素を左に２つ、after擬似要素を右に2つ作るだけです。
実際の作り方は以下の様な感じ。
<article class="outer">
<div class="inner">
<div class="content">
<h3 class="title">Message</h3>
<p>コンテンツないのテキストが入ります。</p>
</div>
</div>
</article>CSS (SCSS記法)
次にCSSです。少し長く見えますが、あえてわかりやすい様に.innerとouterに分けて記載していますがほとんど共通の設定ですよね。せっかくなので、共通設定のscssを以下に書いておきます。
.outer, .inner{
position:relative;//基準位置
&:before,&:after{
position:absolute;
content:"";//●の作成
background-color:#fff;
width:24px;//●の大きさ
height:24px;//●の大きさ
border-radius:50%;
top:-12px;
left:-12px;
z-index:100 // コンテンツより前にする。
}
&:after{
left:auto;
right:-12px;
}
}
.inner{
backgroud-color:#FAF3F5;
&:before,&:after{
top:auto;
bottom::-12px;
}
}まとめ
他サイトで紹介されている方法より、だいぶ簡単ではないでしょうか？
少し考えると意外と簡単に実装できることもあるので、コピペするだけではなく理解する癖もつけておきましょう！
以下のinstagramでも紹介しているので、こちらも参考にしてみてくださいね。
なお、instagramでは実務で使えるコーディングを定期的に更新していますので興味のある方はフォローしてみてくださいね^^
