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

zoukankan html css js c++ java

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;
       150px;
       height: 150px;
       border: 1px solid black;
       padding: 10px;
       margin: 10px;
   }

   .wraper div {
       height: 0px;
   }

   .d1 {
       1px;
       margin: 0 auto;
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
       border-bottom: 100px solid;
       color: red;
   }

   .d2 {
       50px;
       margin: 0 auto;
       border-bottom: 100px solid;
       color: orange;
   }

   .d3 {
       50px;
       margin: 0 auto;
       border-left: 30px solid transparent;
       border-right: 30px solid transparent;
       border-bottom: 100px solid;
       color: blue;
   }

   .d4 {
       1px;
       margin: 0 auto;
       border-left: 50px solid transparent;
       border-bottom: 100px solid;
       color: green;
   }

   .d5 {
       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>

查看全文

相关阅读:
c#代码：使用假设的方法遍历解决“谁养鱼”问题(据说是爱因斯坦所出的一道推理题) 无为而为
 远洋地暖的使用步骤
 合伙人四大原则
 model y搭载60度磷酸铁锂电池的续航表现
 model3家用充电桩按220V还是380V区别？
食用油的挑选标准
 职责链模式(Chain of Responsibility)
通用数据链接(UDL)的用法
 Oracle REGEXP_INSTR 用法
 访问者模式(Visitor)

原文地址：https://www.cnblogs.com/liujinyu/p/4026537.html