背景がボーダー(とか単色ではない)の吹き出し
こんなやつ
・レスポンシブでもデザインの背景に切れ目が入らない
・複数行でも対応できる を満たす実装
html
<div class="title">背景がボーダーの吹き出しのタイトル</div> <br><br><br> <div class="title">背景がボーダーの吹き出しのタイトル改行が入っても大丈夫です。<br>背景がボーダーの吹き出しのタイトル改行が入っても大丈夫です。<br>背景がボーダーの吹き出しのタイトル改行が入っても大丈夫です。</div>
.title { position: relative; padding: 16px 10px 35px; font-weight: bold; text-align: center; background-image: linear-gradient(-45deg, #Fe4d40 25%, #ff978a 25%, #ff978a 50%, #Fe4d40 50%, #Fe4d40 75%, #ff978a 75%, #ff978a); background-repeat: repeat; background-position: center; background-size: 8px 8px; } .title::before, .title::after { position: absolute; content: ""; display: block; bottom: 0; border-bottom: 20px solid white; width: 50%; box-sizing: border-box; } .title::before { left: 0; border-right: 20px solid transparent; } .title::after { right: 0; border-left: 20px solid transparent; }