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