今回は、擬似要素で三角形をつくり、吹き出し型のタイトルを作る方法を御紹介します。
ちなみにこんなやつです↓
いろいろなサイトを見たり、模写したりしているとけっこう見かけますよね。
でも、これってどうやるんだろ、という方は参考にしてください。
サンプルコード
HTML
<div class="balloon">
<h3 >タイトル</h3>
</div>
CSS
.balloon{
position: relative;
background: #3B4552;
text-align: center;
color:white;
height: 150px;
}
.balloon:after{
content: "";
position: absolute;
right: 0;
bottom: -20px;
left: 0;
width: 0px;
height: 0px;
margin: auto;
border-style: solid;
border-color: #3B4552 transparent transparent transparent;
border-width: 20px 50px 0 50px;
}
詳しくはこちらを参考にしてください。
まとめ
コードの意味を解説するより、
実際に色や数値を変えることで、
どのように変化するか確認した方が理解が速いと思います。
いろいろとアレンジしてみてください。
Bootstrap関連の記事も紹介しておきます↓ 続きを見る
【Bootstrap】ヘッダーロゴは左端、メニューは右端 とする方法