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> |
