Result

ベン図(Wikipedia)っぽいやつです。CSSグリッドで作られています。
コードの詳細はPen内をご参照ください。
使い道は応用すればユニークなものが作れそうですが「ベン図」としての機能は、うーんという感じかもですね

html

<article class="Venn">
		<div class="circle one">
			<span></span>
			<span></span>
			<h3>1</h3>
			<p>
					hoge
			</p>
		</div>
		<div class="circle two">
			<span></span>
			<span></span>
			<h3>2</h3>
			<p>
				huga
			</p>
		</div>
		<div class="circle three">
			<span></span>
			<span></span>
			<h3>3</h3>
			<p>
				piyo
			</p>
		</div>
		<div class="shape onetwo">
			<span></span>
			<span></span>
			<h3>1 + 2</h3>
			<p>
				hoge+huga
			</p>
		</div>
		<div class="shape onethree">
			<span></span>
			<span></span>
			<h3>1 + 3</h3>
			<p>
				hoge+piyo
			</p>
		</div>
		<div class="shape twothree">
			<span></span>
			<span></span>
			<h3>2 + 3</h3>
			<p>
				hoga+piyo
			</p>
		</div>
		<div class="shape onetwothree">
			<span></span>
			<span></span>
			<h3>1 + 2 + 3</h3>
			<p>
				all
			</p>
		</div>
	</article>

via

CSS Grid and Shape-Outside Venn Diagram