今天，偶遇一个css绘制三角形的代码，用处很大哦，分享给大家，送上代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 .parent{
8 width: 300px;
9 height: 100px;
10 margin: 10px auto;
11 background-color: green;
12 }
13 .square{
14 width: 0;
15 height: 0;
16 border-bottom: 15px solid white;
17 border-left: 15px solid white;
18 border-right: 15px solid green;
19 border-top: 15px solid green;
20 position: relative;
21 left: -30px;
22 top: 20px;
23 }
24 </style>
25 </head>
26 <div class="parent">
27 <div class="square"></div>
28 </div>
2
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 .parent{
8 width: 300px;
9 height: 100px;
10 margin: 10px auto;
11 background-color: green;
12 }
13 .square{
14 width: 0;
15 height: 0;
16 border-bottom: 15px solid white;
17 border-left: 15px solid white;
18 border-right: 15px solid green;
19 border-top: 15px solid green;
20 position: relative;
21 left: -30px;
22 top: 20px;
23 }
24 </style>
25 </head>
26 <div class="parent">
27 <div class="square"></div>
28 </div>
29 </html>
我再firefox浏览器上得到如下效果，看官请看：
把content的区域设置成0*0，然后再利用border属性选取适当的变化就可以了；
来源：https://www.cnblogs.com/anchao/p/5068380.html