首页 > > 网页制作 > css >

如何利用border书写三角形，建议考虑正方形

2020-02-21 16:00:59来源：博客园阅读 ()

如何利用border书写三角形，建议考虑正方形

网页做三角形图片，你还在拿ps调整吗？out了，老铁，来和我一起脑海畅想一个正方形是由4个等腰直角三角形构成，然后我想保留上边的三角形，那下边、左边、右边的三角形就没了（设置背景色transparent或者与背景相近的颜色），最终结果就是一个保留上边，方向朝下的三角形，需要注意一点的是设置的css样式中width=0，如果不是就不能构成正方形，而是一个梯形；此外还可以通HTML实体里的三角形符号，朝上&#9650朝下&#9660朝左&#9668朝右&#9658，最后通过font的大小颜色控制三角形！

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>怎样不用图片来做一个三角形图标</title>
 7     <style type="text/css">
 8     *{
 9         margin: 0;
10         padding: 0;
11     }
12     /* .box1,.box2,.box3,.box4{
13         font-size: 66px;
14         color: lightcoral;
15         cursor: pointer;
16     } *//*HTML实体里的三角形符号*/
17     .box{
18         width: 0px;
19         border-left: 100px solid red;
20         border-right: 100px solid yellow;
21         border-top: 100px solid green;
22         border-bottom: 100px solid #000;
23     }/*四个三角形构成一个正方形，想要哪个边另外三边transparent*/
24     .box{
25         width: 0px;
26         border-left: 100px solid transparent;
27         border-right: 100px solid transparent;
28         border-top: 100px solid red;
29         border-bottom: 100px solid transparent;
30     }
31     .triangle1{
32         width: 0px;
33         border: 100px solid yellow;
34         border-top-color:transparent;
35         border-left-color: transparent;
36         border-right-color: transparent;
37     }
38     /*需要多大的三角形就设置相应像素的border值，然后将其中三个方向的边框颜色设置为透明或者将边框颜色设置为与背景相同的颜色即可*/
39     </style>
40 </head>
41 <body>
42     <!-- 方法一 -->
43     <div class="box1">&#9650</div>
44     <div class="box2">&#9660</div>
45     <div class="box3">&#9668</div>
46     <div class="box4">&#9658</div>
47     <!-- 方法二 -->
48     <div class="box"></div>
49 
50     <div class="triangle1"></div>
51 </body>
52 </html>