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

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

新老客户大回馈,云服务器低至5折

如何利用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>

如果想了解更多纯CSS写三角形-border法,建议参考下小平头~ 与mumu42(后续有时间再补全该页面border书写三角形的方法)


原文链接:https://www.cnblogs.com/dhnblog/p/12343748.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:学习了解CSS3发展方向和CSS样式与优先级

下一篇:基于原生的 html css js php ajax做的一个 web登录和注册系统