このブログでは私自身がプログラミング、Web関係、生活していて経験した悩んだことを同じように悩んでいる人の手助けになるような情報を発信していきます。
基となる作品
はじめに
HTML
<body>
<div class="balloon">
<h1>こんにちは</h1>
</div>
</body>CSS
body{
margin:0;
background-color: pink;
}
.balloon{
width: 225px;
height: 200px;
background-color: white;
border-radius:100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}display: flex;justify-content: center;align-items: center;で文字を上下左右に中央寄せ。
balloonクラス(親要素)にposition: relative;とします。
それでは解説していきます
CSS
.balloon::before{
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 50px 20px;
border-color: white transparent transparent transparent;
position: absolute;
right: 5px;
bottom: -70px;
}balloonクラスbeforeでは吹き出しの突出している三角部分をborderで作っていきます。
border-styleはsolid、border-widthを50px 20pxにして縦長の長方形にします。
border-colorをwhite transparent transparent transparentとして逆三角を作ります。
position: absolute;でballoonクラスに重ね、右に5px、下に70pxに移動させます。
最後に
.balloon::before{
position: absolute;
right: 5px;
bottom: -70px;
content: '';
z-index: -1;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 20px;
border-color: white transparent transparent transparent;
transform: skew(30deg , 0);
}