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>

查看全文

相关阅读:
实验十二：面向对象基础 5、构造方法、重载
 实验十一：面向对象基础 3、类、对象、方法实训
 实验十：程序结构与数组 8、数组实训
 实验九：程序结构与数组 6、方法实训
 课后作业：情境三：程序结构与数组 5、方法
 Java获取随机数
 实验八：程序结构与数组 4、循环实训
 情境三：程序结构与数组 4、循环实训
 ES查询优化
 ES配置搜索规则

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