LINE風のふきだしデザイン

LINE風のふきだしデザインでページを作ってほしいと言われた。

CSSはあまり理解していないのでどうしたらいいものかと悩んだところ
良いサンプルがあったのでメモ。

■参考サイト
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/default.css

■ソース

<style>
.triangle-right {
background: linear-gradient(#2E88C4, #075698) repeat scroll 0 0 transparent;
border-radius: 10px 10px 10px 10px;
color: #000000;
margin: 1em 0 3em;
padding: 15px;
position: relative;
}
.triangle-right.top {
background: linear-gradient(#075698, #2E88C4) repeat scroll 0 0 transparent;
}
.triangle-right.left {
background: none repeat scroll 0 0 #6495ED;
margin-left: 40px;
}
.triangle-right.right {
background: none repeat scroll 0 0 #FFC0CB;
margin-right: 40px;
}
.triangle-right:after {
border-color: #6495ED transparent;
border-style: solid;
border-width: 20px 0 0 20px;
bottom: -20px;
content: "";
display: block;
left: 50px;
position: absolute;
width: 0;
}
.triangle-right.top:after {
border-color: transparent #075698;
border-width: 20px 20px 0 0;
bottom: auto;
left: auto;
right: 50px;
top: -20px;
}
.triangle-right.left:after {
border-color: transparent #6495ED;
border-width: 15px 40px 0 0;
bottom: auto;
left: -40px;
top: 16px;
}
.triangle-right.right:after {
border-color: transparent #FFC0CB;
border-width: 15px 0 0 40px;
bottom: auto;
left: auto;
right: -40px;
top: 16px;
}
</style>

<p class="triangle-right left">
left
</p>

<p class="triangle-right right">
right
</p>

CSS呼び出して<p>タグで囲んで必要なclassをつけるだけ。
CSSだけでふきだし出来るとかびっくり。

※2014/01/12　サンプルとソース追記