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属性选取适当的变化就可以了；
