使用CSS绘制基本图形
你懂得，不解释，直接上代码。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head><title> New Document </title><meta name="Generator" content="EditPlus"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><style type="text/css">.wraper {position: relative;float: left;width: 150px;height: 150px;border: 1px solid black;padding: 10px;margin: 10px;}.wraper div {height: 0px;}.d1 {width: 1px;margin: 0 auto;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid;color: red;}.d2 {width: 50px;margin: 0 auto;border-bottom: 100px solid;color: orange;}.d3 {width: 50px;margin: 0 auto;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 100px solid;color: blue;}</style> </head> <body><div class="wraper"><div class="d1"></div></div><div class="wraper"><div class="d2"></div></div><div class="wraper"><div class="d3"></div></div> </body></html>
显示的结果：
http://dl.iteye.com/upload/attachment/0065/8243/8d70a8e0-cca4-367d-834a-92eb6a0f4662.png
页:
[1]