吹き出しCSSジェネレーター
CSSだけで吹き出しをつくるジェネレーターです。
枠線やしっぽ（三角形）のサイズ・角度などのデザインもカスタマイズ可能。
出力されるCSSコードをコピペで簡単に使えます。
スポンサーリンク
テンプレートからカスタマイズを開始
（※現在のカスタマイズ内容はリセットされます）
カスタマイズ
プレビュー
CSSコード
.speechBubble {
position: relative;
display: inline-block;
margin-bottom: 20px;
padding: 16px;
border: 2px solid #000000;
border-radius: 8px;
background-color: #d6fdff;
text-align: left;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #000000;
}
.speechBubble::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
border-style: solid;
border-width: 20px 10px 0 10px;
border-color: #000000 transparent transparent;
translate: -50% 100%;
}
.speechBubble::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
border-style: solid;
border-width: 15.5px 7.8px 0 7.8px;
border-color: #d6fdff transparent transparent;
translate: -50% 100%;
}使用上の注意
- モダンブラウザでの使用を想定しており、IEや古いバージョンのブラウザではサポートされていないCSSプロパティを含む場合があります。
- 当サイトのリセットCSSは「modern-normalize.css」をベースにしています。ご自身のプロジェクトで利用するリセットCSSやその他のCSSによって、プレビューの見た目と差異が生じる場合があります。
スポンサーリンク
