使用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 alt="应用CSS绘制基本图形"> 1 楼 BuN_Ny 2012-04-19 三角那个是怎么弄出来的 2 楼 lib 2012-04-19 BuN_Ny 写道三角那个是怎么弄出来的
三角和梯形的实现,唯一区别就是width这个属性。
最简单、直接的方式就是给div加上background-color,你就会马上理解到其中的奥妙。
哈哈!快试一下吧!