[CSS] CSSだけでつくる吹き出しデザイン：パート2 ボーダー付き（可変） CSS Speech Bubble with Border : norm

画像を使わずにCSSだけで吹き出しデザインを実装する方法のパート2です。今回は少し面倒くさいボーダー付きの吹き出しデザインです。吹き出しの三角部分のボーダーを:before擬似要素に:after擬似要素を重ねることによって実現しています。前回の記事もどうぞ。CSSだけでつくる吹き出しデザイン CSS Speech Bubble with Border。

CSSサポート状況

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

Demo

下中央

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

上中央

左中央

右中央

下三角半分

上三角半分

左三角半分

右三角半分

HTML

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

CSS

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

[CSS] CSSだけでつくる吹き出しデザイン：パート2 ボーダー付き（可変） CSS Speech Bubble with Border