css绘制三角形 | 易学教程

　　今天，偶遇一个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

标签

css三角形

css

Solid