Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.Progressive enhancement: pure CSS speech bubbles Nicolas Gallagher Blog & Ephemera
この手のデザインはたまに見かけますが、HTML側がシンプルならブログでも使い易そうです。
after擬似要素にマイナスのbottom指定ではみ出させるんですか。
<blockquote class="triangle-isosceles">
<p>Quote</p>
</blockquote>
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 1em;
color:#000;
background:#f3961c;
/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content:"\00a0";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
z-index:-1;
bottom:-30px;
left:20px;
width:0;
height:0;
border-width:15px 15px;
border-style:solid;
border-color:#f3961c transparent transparent;
}
Make Linkを使って、段落単位の長い引用をする際に、下記の様なコードを生成する様に設定しているのですが、このスタイルだとblockquoteと直後のaタグが見た目に関連ありげに表示できるのでいいですね。
<blockquote cite="http://www.example.com" title="page title">
long sentence
</blockquote>
<a href="http://www.example.com"><cite>page title</cite></a>