<!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;
}
.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>
</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>
<div class="wraper">
<div class="d4"></div>
</div>
<div class="wraper">
<div class="d5"></div>
</div>
</body>
</html>