这是一个比较正常的
但如果我们把宽度和高度去掉呢？
好像看不太出来对吧，我们来给边框加上不同颜色。
看出啥了没，分明就是每个边都是一个三角形啊。
那假如我想要一个朝下的三角形是不是我只要把border-top给显示出来，其他的隐藏就好了啊。OK，说干就干
transparent表示透明，所以可以当做隐藏来使用。你可能会说那直接只设置border-top不就好了吗，但你可以发现是不行的，你试试就知道了。
单个：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #item1{ 8 width:0px; 9 height:0px; 10 border:30px solid transparent; 11 border-top:30px solid red; 12 } 13 #item2{ 14 width:0px; 15 height:0px; 16 border:30px solid transparent; 17 border-left:30px solid green; 18 } 19 #item3{ 20 width:0px; 21 height:0px; 22 border:30px solid transparent; 23 border-bottom:30px solid pink; 24 } 25 #item4{ 26 width:0px; 27 height:0px; 28 border:30px solid transparent; 29 border-right:30px solid lightblue; 30 } 31 </style> 32 </head> 33 <body> 34 <div id="item1"></div> 35 <div id="item2"></div> 36 <div id="item3"></div> 37 <div id="item4"></div> 38 </body> 39 </html>
两个组合：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #item1{ 8 width:0px; 9 height:0px; 10 border:30px solid transparent; 11 border-top:30px solid red; 12 border-right:30px solid red; 13 } 14 #item2{ 15 width:0px; 16 height:0px; 17 border:30px solid transparent; 18 border-top:30px solid green; 19 border-left:30px solid green; 20 } 21 #item3{ 22 width:0px; 23 height:0px; 24 border:30px solid transparent; 25 border-top:30px solid pink; 26 border-bottom:30px solid pink; 27 } 28 #item4{ 29 width:0px; 30 height:0px; 31 border:30px solid transparent; 32 border-right:30px solid lightblue; 33 border-bottom:30px solid lightblue; 34 } 35 #item5{ 36 width:0px; 37 height:0px; 38 border:30px solid transparent; 39 border-right:30px solid lightsalmon; 40 border-left:30px solid lightsalmon; 41 } 42 #item6{ 43 width:0px; 44 height:0px; 45 border:30px solid transparent; 46 border-bottom:30px solid red; 47 border-left:30px solid red; 48 } 49 </style> 50 </head> 51 <body> 52 <div id="item1"></div> 53 <div id="item2"></div> 54 <div id="item3"></div> 55 <div id="item4"></div> 56 <div id="item5"></div> 57 <div id="item6"></div> 58 </body> 59 </html>
三个组合：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #item1{ 8 width:0px; 9 height:0px; 10 border-left:30px solid transparent; 11 12 border-top:30px solid red; 13 border-right:30px solid red; 14 border-bottom:30px solid red; 15 } 16 #item2{ 17 width:0px; 18 height:0px; 19 border-bottom:30px solid transparent; 20 21 border-top:30px solid green; 22 border-right:30px solid green; 23 border-left:30px solid green; 24 } 25 #item3{ 26 width:0px; 27 height:0px; 28 border-right:30px solid transparent; 29 30 border-top:30px solid pink; 31 border-left:30px solid pink; 32 border-bottom:30px solid pink; 33 } 34 #item4{ 35 width:0px; 36 height:0px; 37 border-top:30px solid transparent; 38 39 border-right:30px solid lightblue; 40 border-left:30px solid lightblue; 41 border-bottom:30px solid lightblue; 42 } 43 </style> 44 </head> 45 <body> 46 <div id="item1"></div> 47 <div id="item2"></div> 48 <div id="item3"></div> 49 <div id="item4"></div> 50 </body> 51 </html>
配合宽度使用。
注意宽度别超过边框长度。
平行四边形
完。