勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

LINE風のふきだしデザイン

   2014/05/23  CSS

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 サンプルとソース追記

 - CSS

  関連記事

Flash上にHTMLの文字やリンクを重ねる方法

FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...

cssのcontent

テキストが書かれているけど、firebugで要素を見ても 書かれていない。かとい ...

formのsubmitをボタンを無くしたり画像をつけたりCSSで装飾

aタグになっていたところをsubmitボタンに変えてほしいという修正依頼があった ...

HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)

HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...

Bootstrap5系でよく使う要素及びClass名のまとめ記事

サンプルページやダッシュボード系のページを組む際にBootstrapを使うことが ...