CSS でバルーン (吹き出し) を作る
CSS だけで、バルーン (吹き出し) を3パターン作ってみました。
ひらめきのバルーン
CSS だけで、バルーン (吹き出し) を作ってみました。これは、ひらめきのバルーンです。
HTML
<div class="balloon-idea"><p>CSS だけで、バルーン (吹き出し) を作ってみました。これは、ひらめきのバルーンです。</p></div>
CSS
balloon-idea { position: relative; width: 240px; margin: 0 auto; padding: 40px; font-size: 18px; background: linear-gradient(#e5f2ff, #b2d9ff); background: -moz-linear-gradient(center top, #e5f2ff, #b2d9ff); background: -webkit-gradient(linear, center top, center bottom, from(#e5f2ff), to(#b2d9ff)); border-radius: 210px / 120px; -moz-border-radius: 210px / 120px; -webkit-border-radius: 210px / 120px; } .balloon-idea:after { content: ""; position: absolute; bottom: -30px; left: 145px; border-width: 35px 10px 0; border-style: solid; border-color: #b2d9ff transparent; display: block; }
話すときのバルーン
CSS だけで、バルーン (吹き出し) を作ってみました。これは、話すときのバルーンです。
HTML
<div class="balloon-talk"><p>CSS だけで、バルーン (吹き出し) を作ってみました。これは、話すときのバルーンです。</p></div>
CSS
.balloon-talk { position: relative; width: 240px; margin: 0 auto; padding: 40px; font-size: 18px; background: linear-gradient(#e5f2ff, #b2d9ff); background: -moz-linear-gradient(center top, #e5f2ff, #b2d9ff); background: -webkit-gradient(linear, center top, center bottom, from(#e5f2ff), to(#b2d9ff)); border-radius: 210px / 120px; -moz-border-radius: 210px / 120px; -webkit-border-radius: 210px / 120px; } .balloon-talk:before { content: ""; position: absolute; bottom: -15px; right: 220px; border-width: 0 0 30px 50px; border-style: solid; border-color: transparent #b2d9ff; display: block; } .balloon-talk:after { content: ""; position: absolute; bottom: -15px; right: 250px; border-width: 0 0 30px 20px; border-style: solid; border-color: transparent white; display: block; }
思い出すときのバブルバルーン
CSS だけで、バルーン (吹き出し) を作ってみました。これは、思い出すときのバブルバルーンです。
HTML
<div class="balloon-bubble"><p>CSS だけで、バルーン (吹き出し) を作ってみました。これは、思い出すときのバブルバルーンです。</p></div>
CSS
.balloon-bubble { position: relative; width: 240px; margin: 0 auto; padding: 40px; font-size: 18px; background: linear-gradient(#e5f2ff, #b2d9ff); background: -moz-linear-gradient(center top, #e5f2ff, #b2d9ff); background: -webkit-gradient(linear, center top, center bottom, from(#e5f2ff), to(#b2d9ff)); border-radius: 210px / 120px; -moz-border-radius: 210px / 120px; -webkit-border-radius: 210px / 120px; } .balloon-bubble:before { content:""; position: absolute; z-index: 10; bottom: -20px; left: 45px; width: 30px; height: 30px; background: #b2d9ff; border-radius: 60px; -webkit-border-radius: 60px; -moz-border-radius: 60px; display: block; } .balloon-bubble:after { content:""; position: absolute; z-index: 10; bottom: -30px; left: 30px; width: 15px; height: 15px; background: #b2d9ff; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; display: block; }
No comments