<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<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;
}
. d4 {
width:1px;
margin:0 Auto;
border-left:50px solid Transparent;
border-bottom:100px solid;
Color:green;
}
. d5 {
width:1px;
margin:0 Auto;
border-right:50px solid Transparent;
border-bottom:100px solid;
Color:gray;
}
</style>
<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>
<div class= "Wraper" >
<div class= "D4" ></div>
</div>
<div class= "Wraper" >
<div class= "d5" ></div>
</div>
</body>
CSS draw various shapes, triangles, rectangles, trapezoidal
