【css】で作る吹き出しはどうできているのか分かりやすく解説します
cssを使って、吹き出しは長方形＋三角形で作れます。
背景に色をつけて、三角形を擬似要素で作成しくっつけると吹き出しになるのです
まずは三角形を作る方法について簡単に見ていきましょう。
cssで三角形を作るには、borderの性質を知る
cssのborderを使うんですが、borderがどんな構造になっているかが分かれば簡単です。
ボーダーを以下のように全体に付けたとします。
<div class="border"></div>.border {
border: solid #333 14px;
width: 200px;
height: 140px;
}border: solid #000 3px; という書き方は、以下の意味を表します。
border → top・right・bottom・left 全てにボーダーをつける。
solid → ボーダーの種類：直線
#333 →ボーダーの色
色分けすると分かりやすいです。
<div class="border2"></div>.border2 {
width: 200px;
height: 140px;
border-top: #fdd8ed solid 24px;
border-right: #e3ffcc solid 24px;
border-bottom: #bdf2ff solid 24px;
border-left: #eee solid 24px;
}このように、ボーダーの端って真っ直ぐじゃなくて、三角形のようになってるのですね。
この性質を利用して、三角形を作ります
<div class="border3"></div>.border3 {
width: 40px;
height: 40px;
border-top: #fdd8ed solid 20px;
border-right: #e3ffcc solid 20px;
border-bottom: #bdf2ff solid 20px;
border-left: #eee solid 20px;
}40pxの正方形に対して、半分の20pxのボーダーを上・右・下・左につけてみるとこんな風に三角形が4つできます。
これを利用するのじゃよ。
（
急に誰）
実は簡単な三角形
この性質を知っていれば、三角形は
です。
まず全体のborderを無色透明で設定します。
<div class="triangle"></div>.triangle {
width: 40px;
height: 40px;
border: 20px solid transparent;
}transparentを使って、ボーダーを透明にし、その後色をつけていきます。
leftに色をつけると、こうなります。
.triangle {
width: 40px;
height: 40px;
border: 20px solid transparent;
border-left: 20px solid #fdd8ed; /* 追加 */
}topに色をつけると、こうなります。
.triangle {
width: 40px;
height: 40px;
border: 20px solid transparent;
border-top: 20px solid #fdd8ed; /* 追加 */
}そして、topとleft同時に色をつけてみると、
.triangle-top-left {
width: 40px;
height: 40px;
border: 20px solid transparent;
border-top: 20px solid #fdd8ed;
border-left: 20px solid #fdd8ed;
}こんな感じになります。
これを利用して、サイズや角度を変えて、好きな三角形を作ってみてください。
ボーダーの太さ20pxに対して、倍の40px色をつけると細長い三角形になりますよ＾＾
.triangle {
width: 40px;
height: 40px;
border: 20px solid transparent;
border-left: 40px solid pink;
}ようやく吹き出しを作る！
ここまで見てきた三角形を使って吹き出しを作ります。
吹き出しだよ！！！
<div class="hukidashi">
<p>吹き出しだよ！！！</p>
</div>.hukidashi {
background: pink;
padding: 1em;
display: inline-block;
border-radius: 20px;
position: relative;
}
.hukidashi::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top: 10px solid pink;
}“hukidashi”という箱に背景色をつけます。
position: relativeにし、三角形を配置する為の基準にします。
beforeを使い、三角形を作ります。
position: absoluteを使い、top・leftで位置を指定します。
ボーダーの大きさが10pxなので、margin-leftに”-10px”をつけ、真ん中に配置します。
つけないとどうなるかはやってみてください。
こうなります。↓
吹き出しだよ！！！
なので、左に寄せる為に”-10px”をつけます＾＾
三角形を右に持ってくるとこんな感じです。
吹き出しだよ！！！
.hukidashi {
background: pink;
padding: 1em;
display: inline-block;
border-radius: 20px;
position: relative;
}
.hukidashi::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-top: -10px;
border: 10px solid transparent;
border-left: 10px solid pink;
margin-left: auto;
}三角形の向きと、場所を変えるといろんな吹き出しパターンが作れます！
ぜひ試してみてください。
いいなと思ったら
TAPしてね♡↓
【css】写真の上に枠を設置する 【cssコピペ】シンプルな見出しのデザインをまとめました
コメントは承認後に表示されます。