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>

查看全文

相关阅读:
自我介绍
 软工第一次编程作业
 软件定义网络第一次作业
 软工个人总结
 实验 7： OpenDaylight 实验——Python 中的 REST API 调用
 实验 6：OpenDaylight 实验——OpenDaylight 及 Postman 实现流表下发
 软工结对编程作业
 实验 4 ： Open vSwitch 实验——Mininet 中使用 OVS 命令
 软件定义网络第三次作业
 软件定义网络第二次作业

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