CSS练习1 – 画三角形

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#triangle{width:0px;border-top:#F00 solid 200px;border-left:#FFF solid 200px;border-right:#FFF solid 200px;
}
</style>
</head>
<body><div id="triangle"></div>
</body>
</html>

实现效果如下：
三角形

CSS练习2 – 画太极

代码如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{background:#00F;
}
#rightBlack{position:absolute;width:500px;height:500px;background:#000;border:#000 solid 1px;border-radius:50%;
}
#leftWhite{position:absolute;width:250px;height:500px;background:#FFF;border:#000 solid 1px;border-top-left-radius:250px;border-bottom-left-radius:250px;
}
#leftWhite:before{content:'';width:250px;height:250px;background:#FFF;border-radius:50%;display:inline-block;position:relative;left:125px;
}
#leftWhite:after{content:'';width:60px;height:60px;background:#000;border-radius:50%;display:inline-block;position:absolute;left:220px;top:95px;
}
#bottomBlack{position:relative;top:251px;left:126px;width:250px;height:250px;background:#000;border-radius:50%;
}
#bottomBlack:after{content:'';width:60px;height:60px;background:#FFF;border-radius:50%;display:inline-block;position:absolute;top:96px;left:96px;
}
</style>
</head>
<body><div id="rightBlack"></div><div id="leftWhite"></div><div id="bottomBlack"></div>
</body>
</html>

实现效果如下：