画像を背景にした吹き出し

Result

よく見るCSS吹き出しに画像背景を設定した案
通常の吹き出しを作る方法とは異なり、余白個所を疑似要素で作ってあります

css

.image {/*全体*/
  width: 300px;
  position: relative;
  margin: 20px auto;
}

.image img {/*画像*/
  display: block;
  width: 100%;
　positon:rerative;
}

.image:before {/*吹き出し左側の余白*/
  display: block;
  content: "";
  border-bottom: 20px solid #fff;
  border-right: 20px solid transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 130px;
}

.image:after {/*吹き出し右側の余白*/
  display: block;
  content: "";
  border-bottom: 20px solid #fff;
  border-left: 20px solid transparent;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 130px;
}

p{/*画像の上にかぶせる*/
  position:absolute;
  color:#fff;
  padding:20px;
}

html

<div class="image">
	<p>(・▽・)</p>
  	<img src="https://picsum.photos/400/300" draggable="false" />
</div>

via

Image arrow (Pure CSS)