CSSでベン図っぽいやつ

Ads

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