背景がボーダー(とか単色ではない)の吹き出し

背景がボーダーのデザイン

こんなやつ

・レスポンシブでもデザインの背景に切れ目が入らない

・複数行でも対応できる を満たす実装

html

<div class="title">背景がボーダーの吹き出しのタイトル</div>
<br><br><br>
<div class="title">背景がボーダーの吹き出しのタイトル改行が入っても大丈夫です。<br>背景がボーダーの吹き出しのタイトル改行が入っても大丈夫です。<br>背景がボーダーの吹き出しのタイトル改行が入っても大丈夫です。</div>

css

.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;
}