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

aaarticlea/png;base64,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" alt="" />

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