今回は、吹き出しデザインを作ってみます。
スマホでは吹き出しとイラストが上下になるようにしています。
ポイントは、三角形の作り方です。
「border」を使って作るのがよく知られていますが、今回は「clip-path」を使って三角を作ります。
◆まずはデモページをご覧ください。
デモページを見る
HTML
<div class="speech">テキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキスト</div>
<div><img src="img/image.png" alt="イラスト"></div>
</div>
CSS
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: 50px;
}
.speech_container img {
width: 200px;
}
.speech {
position: relative;
padding: 30px 50px;
background-color: #e1eeff;
border-radius: 20px;
}
.speech::before {
position: absolute;
display: block;
content: '';
top: 50%;
transform: translateY(-50%);
right: -50px;
width: 50px;
height: 50px;
background-color: #e1eeff;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
@media screen and (max-width: 767px) {
.speech_container {
flex-flow: column;
}
.speech::before {
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #e1eeff;
clip-path: polygon(0 0, 100% 0%, 50% 100%);
}
}
「before」の部分で、「clip-path」を使っています。
PCでは右向きで、スマホでは下向きにしています。
「clip-path」はジェネレーターを使うと便利です。
ちなみに、
・上向き↑なら
clip-path: polygon(0 100%, 50% 0, 100% 100%);
・左向き←なら
clip-path: polygon(100% 0, 0 50%, 100% 100%);
です。