記事の見出しタグを吹き出し形式にする方法

[Criss.AC] Open love
記事中に使用する見出しタグ h2 を吹き出しのような形にしてみました。

photo credit: Criss.AC via photopin cc


記事中のみで使用する場合は、 .postと指定します。


Sample


上のような感じになります。


.post h2{
position:relative;
margin-bottom:20px;
padding:10px 10px 10px 20px;
background-color:#ECECEC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
}

.post h2:before{
content:"";
position:absolute;
width:0px;
height:0px;
top:100%;
left:30px;
border-style:solid;
border-width:20px 20px 0px 3px;
border-color:#ECECEC rgba(192,192,192,0);
}



<h2>Sample</h2>


参照 :

CSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみる