[CSS] CSSだけでつくる吹き出しデザイン（可変） CSS Speech Bubble

画像を使わずにCSSだけで吹き出しデザインを実装する方法です。基本的な単色パターンで、吹き出しの三角部分を擬似要素を使って実現しています。上下左右への変更が行いやすいように CSSを分割しています。

CSSサポート状況

• :before擬似要素、:after擬似要素

Demo

下中央

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

上中央

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

左中央

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

右中央

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

下三角半分

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

上三角半分

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

左三角半分

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

右三角半分

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

HTML

 

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

CSS

/* 共通 */
.bubble {
 display:inline-block;
 position: relative;
 padding:1em;
 border-radius:5px;
 background: #fff;
}
.bubble:after {
 position: absolute;
 content: " ";
 height: 0;
 width: 0;
}
/* 下中央 */
.bubble-bottom:after {
 top: 100%;
 left: 50%;
 border:10px solid transparent;
 border-top:10px solid #fff;
 margin-left: -10px;
}
/* 上中央 */
.bubble-top:after {
 bottom: 100%;
 left: 50%;
 border:10px solid transparent;
 border-bottom:10px solid #fff;
 margin-left: -10px;
}
/* 左中央*/
.bubble-left:after {
 right: 100%;
 top: 50%;
 border:10px solid transparent;
 border-right:10px solid #fff;
 margin-top: -10px;
}
/* 右中央 */
.bubble-right:after {
 left: 100%;
 top: 50%;
 border:10px solid transparent;
 border-left:10px solid #fff;
 margin-top: -10px;
}
/* 下三角半分 */
.bubble-half-bottom:after {
 top: 100%;
 left: 5%;
 border-top:10px solid #fff;
 border-right:10px solid transparent;
}
/* 上三角半分 */
.bubble-half-top:after {
 bottom: 100%;
 left: 5%;
 border-bottom:10px solid #fff;
 border-right:10px solid transparent;
}
/* 左三角半分 */
.bubble-half-left:after {
 right: 100%;
 top: 10%;
 border-top:10px solid #fff;
 border-left:10px solid transparent;
}
/* 右三角半分 */
.bubble-half-right:after {
 left: 100%;
 top: 10%;
 border-top:10px solid #fff;
 border-right:10px solid transparent;
}