用border-radius作图的太极图，大家看看-HTML教程-爱易网页

用border-radius作图的太极图，大家看看

日期：2014-05-17　浏览次数：20674 次

用border-radius绘制的太极图，大家看看





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> new document </title>

<style type="text/css">

body {

	background: #9999cc;

}

.as1 {

	width: 400px; height: 400px;	/* 太极图大小 */

	box-shadow: 0px 0px 10px 1px #ffff00;

}

.as1 , .ar2 , .at1{

	background: #ffffff;

}

.as2 , .ar1 , .at2 {

	background: #000000;

}



.as1 , .as1 div {

	position: relative;

	border-radius: 8000px;

}

.as2.as2 {

	width: 50%; height: 100%;

	border-radius: 8000px 0px 0px 8000px;

}

.ar1 , .ar2 {

	left: 50%; width: 100%; height: 50%;

}

.at1 , .at2 {

	left: 35%; top: 35%; width: 30%; height: 30%;

}

</style>

</head>

<body>

用border-radius绘制太极图

<br /><br />



<div class="as1">

<div class="as2">

	<div class="ar1"><div class="at1"></div></div>

	<div class="ar2"><div class="at2"></div></div>

</div>

</div>

</body>

</html>