css绘制各种图形，三角形，长方形，梯形

浏览数：107 / 时间：2015年06月09日

<!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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。