运用CSS怎样来绘制几何图形，代码是什么

发布时间：2023-10-13 09:48:39 所属栏目：语言来源：

导读： 今天就跟大家聊聊有关“使用CSS怎样来绘制几何图形，代码是什么”的内容，可能很多人都不太了解，为了让大家认识和更进一步的了解，小编给大家总结了以下内容，希望这篇“使用CSS怎样来绘制几何

今天就跟大家聊聊有关“使用CSS怎样来绘制几何图形，代码是什么”的内容，可能很多人都不太了解，为了让大家认识和更进一步的了解，小编给大家总结了以下内容，希望这篇“使用CSS怎样来绘制几何图形，代码是什么”文章能对大家有帮助。

　　这次我主要总结一下用Css绘制各种形状的技巧，同时要结合before、after伪元素和定位做出一些效果。

　　Triangle Up(向上的三角形)
　　　
1 #triangle-up{
2　 width: 0;
3 height:0;
4 border-left:50px solid transparent;
5 border-right: 50px solid transparent;
6 border-bottom: 70px solid #81cfa2;
7 }
　
　　Triangle Down(向下的三角形)
　
1 #triangle-down {
2 width: 0;
3 height: 0;
4 border-left: 50px solid transparent;
5 border-right: 50px solid transparent;
6 border-top: 70px solid #81cfa2;
7 }
　
　　Triangle Left(向左的三角形)

#triangle-left{
width: 0;
height:0;
border-right: 70px solid #81cfa2;
border-top: 50px solid transparent;
border-bottom:50px solid transparent;
}
　　　　
　　Triangle TopRight(向右上的三角形)

#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid #81cfa2;
border-left: 100px solid transparent;
}
　　三角形实现比较简单，同理可以得到一些其他的三角形，绘制三角形主要是另宽高都为0，然后利用transparent设置其他部分透明。
但是要学会在自己的项目中结合before和after伪元素以及定位做出一些组合效果，比如我正在做的Oppo社区的一个项目

　　这里我贴上导航栏处绘制三角形的代码

1 .search:before {
2 border-bottom-color: #000 !important;
3 top: -11px;
4 }
5 .search:after, .search:before {
6 width: 0;
7 height: 0;
8 content: '';
9 border-style: dashed dashed solid;
10 border-color: transparent transparent #fff;
11 border-width: 0 10px 10px;
12 overflow: hidden;
13 position: absolute;
14 top: -10px;
15 right: 10px;
16 }

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!