枠線付きの吹き出しテキストの作成が難しい…

↑こういう感じの、吹き出しと枠線がついたデザインってよくありますよね。
ただこれを何も知識ない状態で実装をすると難しい。
特に境界面で枠線が途切れてる部分をどうやって再現するのか。
この実装は以下の3ステップに分けると理解しやすいです。
①枠線だけのボックスを作る
②1つ目の擬似要素で三角形を作る
③2つ目の擬似要素で三角形を作り、重ねる。
順番に解説していきます。
完成イメージ
まずは最終的な完成したコードを紹介します。
See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.
html
<div class="arrow-box">
<p>
枠線がついた吹き出しは<br />
意外と難しい。
</p>
</div>
css
.arrow-box {
margin-top: 50px;
width: 200px;
position: relative;
display: inline-block;
background: #ffecf1;
border-radius: 8px;
padding: 6px 12px;
border: 1px solid #f090a9;
box-sizing: border-box;
}
.arrow-box p {
font-size: 12px;
font-weight: 400;
line-height: 19.2px;
letter-spacing: 0.04em;
text-align: left;
}
/* 吹き出しの三角:枠線 */
.arrow-box:before {
content: '';
position: absolute;
top: -24px;
left: 23%;
border: 8px solid transparent;
border-bottom: 18px solid #ffecf1;
z-index: 2;
}
/* 吹き出しの三角:背景色 */
.arrow-box:after {
content: '';
position: absolute;
top: -27px;
left: 23%;
border: 8px solid transparent;
border-bottom: 18px solid #f090a9;
z-index: 1;
}
枠線付きのボックスに、擬似要素で三角形を2つ作り重ねることで再現しています。
これだけだとよくわからないと思うので、
冒頭で説明した通り下記の順番で解説します。
①枠線だけのボックスを作る
②1つ目の擬似要素で三角形を作る
③2つ目の擬似要素で三角形を作り、重ねる。
①枠線だけのボックスを作る
まずは枠線だけのボックスを作ります。
See the Pen 枠線のみのボックス by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.
<body>
<div class="arrow-box">
<p>
枠線がついた吹き出しは<br />
意外と難しい。
</p>
</div>
</body>
.arrow-box {
position: relative;
margin-top: 50px;
width: 200px;
background: #ffecf1;
border-radius: 8px;
padding: 6px 12px;
border: 1px solid #f090a9;
}
.arrow-box p {
font-size: 12px;
font-weight: 400;
line-height: 19.2px;
letter-spacing: 0.04em;
text-align: left;
}
シンプルにborderがついたボックスを作っています。
このボックスに擬似要素をつけます。
②1つ目の擬似要素で三角形を作る
次に1つ目の擬似要素で三角形を作り、指定の位置に配置します。
See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.
/* 吹き出しの三角:枠線 */
.arrow-box:before {
content: '';
position: absolute;
top: -24px;
left: 23%;
border: 8px solid transparent;
/* ↓borderの方向を変更で、矢印の向きが変わる。 */
border-bottom: 18px solid #ffecf1;
z-index: 2;
}
before要素で三角形を作り、ボックスの上部に配置します。
上下左右全てのborderをtransparentで透明にし、
どれか一つのborderに色をつけると三角形ができます。
border: 8px solid transparent;
border-bottom: 18px solid #ffecf1;
borderの方向を変えることで、
下向き、上向矢印などを柔軟に変更できます。
ただこれだけだと、三角形に枠線がついていません。
③2つ目の擬似要素で三角形を作り、重ねる。
最後に二つ目の擬似要素で枠線と同じ色の三角を作り、重ねます。
See the Pen 吹き出し+枠線ボックス by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.
追加したのは下記のコード
/* 吹き出しの三角:背景色 */
.arrow-box:after {
content: '';
position: absolute;
top: -27px;
left: 23%;
border: 8px solid transparent;
border-bottom: 18px solid #f090a9;
z-index: 1;
}
after要素で、beforeと同じサイズの三角を作って、topを少しずらしています。
二つの色の違う三角形が重なることで、枠線のついた三角形に見せているという実装です
以上、ここまでで枠線付きの吹き出しテキストの作成ができました。
まとめ
今回は「枠線付きの吹き出しテキスト」の作り方をまとめました。
同じサイズの擬似要素の三角形を重ねることで、レイアウトを再現できます。
簡単そうに見えて意外と難しいのが吹き出しボックスだと思います。
今回の記事が誰かの参考になれば幸いです。
もしも質問などあれば、コメント欄かXのDMよりお気軽にご連絡ください。
コメント