CSSとhtmlだけで吹き出しボックスを作る

CSSとhtmlだけで吹き出しボックスを作る方法です。これは海外サイトの「Fun With CSS Shapes」のページを参考にしています。個人的には使用しないとは思いますが、大変おもしろく、参考になるCSSテクニックです。表示例は実際に表示されたものを画像に加工したものです。組み込むとブラウザによってはレイアウトがメチャクチャになったので…。

CSSとhtmlで作った吹き出しボックスのブラウザ表示①

■CSS記述
blockquote#one { width:250px; background:#e3e3e3; padding:25px; position:relative; }

#one .arrow { width:0; height:0; line-height:0; border-top:30px solid #e3e3e3; border-left:60px solid white; border-right:10px solid white; position:absolute; bottom:-30px; right:30px; }
■XHTML記述
<div id="wrap"> 

<blockquote id="one"> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 

ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 

ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 

<span class="arrow" />

</blockquote> 

</div>
CSSとhtmlで作った吹き出しボックスのブラウザ表示①

CSSとhtmlで作った吹き出しボックスのブラウザ表示例②

■CSS記述
blockquote#three { width:450px; background:#e3e3e3; padding:25px; position:relative; }

#three .arrow { width:0; height:0; line-height:0; border-bottom:25px solid #e3e3e3; border-right:50px solid white; position:absolute; top: -24px; left:20px; }
■XHTML記述
<div id="wrap"> 

<blockquote id="three"> 

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 

<span class="arrow" /><!-- 吹き出し部分 -->

</blockquote> 

</div>
CSSとhtmlで作った吹き出しボックスのブラウザ表示②

CSSとhtmlで作った吹き出しボックスのブラウザ表示例③

■CSS記述
blockquote#two { width:250px; background:#e3e3e3; padding:25px; position:relative; }

blockquote#two .arrow { width:0; height:0; line-height:0; border-top:40px solid #e3e3e3; border-left:none; border-right:30px solid white; position:absolute; bottom:60%; right:-30px; }
■XHTML記述
<div id="wrap"> 

<blockquote id="two"> 

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 

<span class="arrow" /><!-- 吹き出し部分 -->

</blockquote> 

</div>
CSSとhtmlで作った吹き出しボックスのブラウザ表示③