使用CSS怎样来绘制几何图形，代码是什么-群英

上一篇：如何用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社区的一个项目（我的这个做Gif的软件有些问题）

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

 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 }