ミギムキ

[CSS] ベン図をCSSだけで描きたい

CSSで描いたベン図

3つの円を重ねたベン図

html

<ul class="venn"> <li>うまい</li> <li>安い</li> <li>早い</li> </ul>
スポンサー広告

CSS

.venn { position: relative; padding: 0px; margin: 0px; width: 20em; height: 19em; font-size: 1.5vw; list-style: none; } .venn > li { display: flex; justify-content: center; align-items: center; position: absolute; width: 11.5em; height: 11.5em; box-sizing: border-box; border: solid 0.3em currentColor; border-radius: 50%; font-weight: bold; text-align: center; } .venn > li:nth-of-type(1) { top: 0px; left: 50%; transform: translateX(-50%); padding: 0px 0.5em; } .venn > li:nth-of-type(2) { bottom: 0px; left: 0px; padding: 0px 2.5em 0px 0.5em; } .venn > li:nth-of-type(3) { bottom: 0px; right: 0px; padding: 0px 0.5em 0px 2.5em; }
  • 幅と高さを設定したリストの中に、li要素を「position: absolute;」で座標指定して配置します
  • 一つ目のli要素は上部中央に、二つ目のli要素は左下に、三つ目のli要素は右下になるよう指定します
  • li要素に書かれた内容が円の線と被らないよう、「padding」で余白を設けています。余白は掲載する文字量に合わせて微調整すると見た目が整います
.venn > li { 〜 border: solid 0.3em currentColor; border-radius: 50%; 〜 }
  • li要素に「border-radius: 50%;」を指定することで、円形に形を変えることができます
  • 円の線の太さは「border: solid 0.3em currentColor;」の内容を書き換えて適宜調整してください

2つの円を重ねたベン図

2つの円を重ねたベン図

html

<ul class="venn"> <li>きのこ派</li> <li>たけのこ派</li> </ul>

CSS

.venn { position: relative; padding: 0px; margin: 0px; width: 20em; height: 11.5em; font-size: 1.5vw; list-style: none; } .venn > li { display: flex; justify-content: center; align-items: center; position: absolute; width: 11.5em; height: 11.5em; box-sizing: border-box; border: solid 0.3em currentColor; border-radius: 50%; font-weight: bold; text-align: center; } .venn > li:nth-of-type(1) { top: 0px; left: 0px; padding: 0px 2.5em 0px 0.5em; } .venn > li:nth-of-type(2) { top: 0px; right: 0px; padding: 0px 0.5em 0px 2.5em; }
スポンサー広告
スポンサー広告