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>

查看全文

相关阅读:
tr加不上边框
 placeholder 用法
 <input/>文本输入框效果:
colspan="2"、列、rowspan="3"、行、用法！
CSS--实现小三角形
 “div+css”下拉菜单
 HDU4624 Endless Spin(概率&&dp)
chanme的博客搬家了！
HDU5487 Difference of Languages(BFS)
HDU5469 Antonidas(树分治&&哈希)

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