CSSでベン図を描く

Html&CSSでベン図を描くサンプルです。

ソースコード

Html

<ul class="venn">
	<li>性格と顔がいい
		<ul><li>E君</li></ul>
	</li>
	<li>性格がいい
		<ul><li>A君 , C君</li></ul>
	</li>
	<li>顔がいい
		<ul><li>B君 , D君</li></ul>
	</li>

</ul>

CSS

/* [1]キャンバス */
ul.venn{
	width: 750px;
	height: 300px; 
	margin: 0;
	padding: 0;
	display: table;
}
ul.venn ul{
	padding: 0;
}
/* li共通 */
ul.venn li {
	list-style: none;
	margin: 0;
	display: table-cell; /* liを横並びにする */
	width: 300px; 
	height: 100%;
	text-align: center; 
	vertical-align: middle;
	border-radius: 50%;
	font-size: 1.1em;
	font-weight: bold;
}
/* 2階層目・値部分のli共通 */
ul.venn li ul li{
	font-size: 1em;
	font-weight: normal;
	color: dimgray;
}

/* [2]共通部分（性格&顔） */

ul.venn > li:nth-child(1) {
	width: 150px;
	/* 座標の計算（x座標値）
	左円の中心 + 共通部分の半径/2
	 → 150 + 75/2 = 187.5
	*/
	transform:translate(187.5px,0);
}

/* [3]左の円（性格） */

ul.venn > li:nth-child(2) {
	background-color:rgba(219, 78, 137, 0.25);
	transform:translate(-150px,0); /* [2]のwidth分移動 */
}

/* [4]右の円（顔） */
ul.venn > li:nth-child(3) {
	background-color: rgba(112, 211, 126, 0.25);
	transform:translate(-225px,0); /* 150 + 150/2 */
}

説明

• ベン図の円となるのはlistの1階層目のli要素です。
  • listをdisplay: table-cellで横並びにし、
  • border-radius: 50%で四角いli要素を円に変形し、
  • transform:translate()で各li要素を移動（重ねたり中央に移動）してベン図にします。
• listの1階層目のli要素のテキストが各集合（カテゴリ）のタイトル用のテキストになります（性格、顔..）。
• listの2階層目のli要素のテキストが各集合の値用のテキストになります（A君、B君..）

工夫した点

• ベン図のデータ（テキスト部分）はHtmlのul,liで入力することで、ul要素に.vennをつけるだけで文書 → 図へ変換されるようにしました。
• position:absoluteで配置するとvertical-alignが効かないのでtranslate()で円を移動させました。