今更聞けない、というか今更解説するのもアレかもしれない、CSSだけで吹き出し作成をしてみたいと思います。
まずはただの四角を書いてみます。
わかりやすくするために、背景をグレーにしました。
ただの四角を書くコード
<style type="text/css">
.box {
width: 40px;
height: 40px;
background-color: silver;
}
</style>
<div class="box"></div>
結果
ここにボーダーを追加してみます。
わかりやすくするために、上下左右を違う色にしました。
また、ボーダーによって四角のサイズが変わってほしくないので、box-sizingを指定しています。
ボーダーを追加したコード
<style type="text/css">
.box {
box-sizing: border-box;
width: 40px;
height: 40px;
background-color: silver;
border-top: solid 3px red;
border-bottom: solid 3px blue;
border-left: solid 3px green;
border-right: solid 3px yellow;
}
</style>
<div class="box"></div>
結果
ボーダーのサイズに四角の半分のサイズを指定してみます。
ボーダーを四角と同じ大きさにしたコード
<style type="text/css">
.box {
box-sizing: border-box;
width: 40px;
height: 40px;
background-color: silver;
border-top: solid 20px red;
border-bottom: solid 20px blue;
border-left: solid 20px green;
border-right: solid 20px yellow;
}
</style>
<div class="box"></div>
結果
ボーダーの1辺(1色)に注目してみると、三角になっています！！
ああ、なるほど、1辺だけボーダーを指定すれば吹き出しに使える三角になるってことね。
ボーダーを1辺だけにしてみるコード
<style type="text/css">
.box {
box-sizing: border-box;
width: 40px;
height: 40px;
background-color: silver;
border-bottom: solid 20px blue;
}
</style>
<div class="box"></div>
結果
あれ・・・。
というわけで、ボーダーの指定はそのままにします。
そのかわり、不要な辺のボーダーの色を透明にします。
下ボーダー以外を透明にしたコード
<style type="text/css">
.box {
box-sizing: border-box;
width: 40px;
height: 40px;
background-color: silver;
border-top: solid 20px transparent;
border-bottom: solid 20px blue;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
}
</style>
<div class="box"></div>
結果
無事に三角ができました。
ところで、このdiv自体は吹き出しの本体なので、もっと大きくして、三角は別の要素にしたいところです。
なので、before疑似要素で三角を作ることにします。
疑似要素にするにはcontentの指定が必須、また、本体とサイズが違うので別で指定します。
div本体を大きくして、三角をbeforeへ指定したコード
<style type="text/css">
.box {
box-sizing: border-box;
width: 300px;
height: 100px;
background-color: silver;
}
.box::before {
content: "";
box-sizing: border-box;
width: 40px;
height: 40px;
border-top: solid 20px transparent;
border-bottom: solid 20px blue;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
}
</style>
<div class="box"></div>
結果
本体と三角が別々に表示されました。
あとは位置と色を合わせればいい感じになりそうです。
三角を絶対配置にしたいので、本体をrelativeにして、三角をabsoluteにします。
これで、本体内での絶対配置にできるので、bottomを100%にします。
bottomに100%を指定することで、本体のbottom(0)位置から本体サイズの100%分上に配置する、という状態になります。
それっぽくleftもずらして、色もグレーに合わせます。
positionで位置を合わせて、同色にしたコード
<style type="text/css">
.box {
box-sizing: border-box;
width: 300px;
height: 100px;
background-color: silver;
position: relative;
}
.box::before {
content: "";
box-sizing: border-box;
width: 40px;
height: 40px;
border-top: solid 20px transparent;
border-bottom: solid 20px silver;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
position: absolute;
bottom: 100%;
left: 40px;
}
</style>
<div class="box"></div>
結果
吹き出しになりました。
今度は塗りつぶしの吹き出しじゃないパターンにしてみます。
本体を背景色指定からボーダー指定に変更します。
本体をボーダーにしたコード
<style type="text/css">
.box {
box-sizing: border-box;
width: 300px;
height: 100px;
border: solid 2px silver;
background-color: white;
position: relative;
}
.box::before {
content: "";
box-sizing: border-box;
width: 40px;
height: 40px;
border-top: solid 20px transparent;
border-bottom: solid 20px silver;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
position: absolute;
bottom: 100%;
left: 40px;
}
</style>
<div class="box"></div>
結果
三角もボーダーにしたいですが、三角は既にボーダーです。
なので、もうひとつの要素を重ねてボーダーっぽくしてみます。
もうひとつの要素にはafter疑似要素を利用すると楽できます。
afterを重ねて三角をボーダーっぽくしたコード
<style type="text/css">
.box {
box-sizing: border-box;
width: 300px;
height: 100px;
border: solid 2px silver;
background-color: white;
position: relative;
}
.box::before {
content: "";
box-sizing: border-box;
width: 40px;
height: 40px;
border-top: solid 20px transparent;
border-bottom: solid 20px silver;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
position: absolute;
bottom: 100%;
left: 40px;
}
.box::after {
content: "";
box-sizing: border-box;
width: 34px;
height: 34px;
border-top: solid 17px transparent;
border-bottom: solid 17px white;
border-left: solid 17px transparent;
border-right: solid 17px transparent;
position: absolute;
bottom: 100%;
left: 43px;
}
</style>
<div class="box"></div>
結果
ボーダーな吹き出しになりました。
afterのサイズやボーダーサイズ、位置は面倒だったので結構適当です。
sassとかだったらcalcとかするとキレイに表せそうです。
いじょ
