作者：程序员学院官网：https://www.chengxuyuan.com一、前言在做前端项目的时候，我们经常会遇到做下拉功能的时候还有一个小三角形，除了我们用图片背景或者iconFont，我们可以用CSS来实现。2.实现原理首先我们来做一个普通的模块，加上不同颜色的边框看看吧！HTML代码：CSS代码：.demo_0{width:100px;高度：100px；边距：100px自动；边框：20px实心透明；border-color:blackbluechocolatecoral}我们会发现每一个border都呈现给我们一个有角度的四边形渲染效果。接下来，我们将这个模块的宽高设置为0，看看效果：CSS代码：.demo_0{width:0;高度：0；边距：100px自动；边框：20px实心透明；border-color:blackbluechocolatecoral}这个时候我们发现渲染出来的效果是不是有四个三角形的图片，这是我们模块宽高都设置为0的时候，我们把border的渲染效果设置给它.接下来，我们将某个方向的边框的border-width设置为0，看看效果：CSS代码：.demo_0{width:0;高度：0；边距：100px自动；边框：20px实心透明；border-color:blackbluechocolatecoral;border-bottom:0;}这里我们可以得出结论：(1)做一个三角形，需要用到模块：宽为0，高为0；(2)不同方向的相似等腰对于一个三角形，需要设置某个方向的border-direction:heightsolidcoral,relativedirectionborder-相对方向不设置任何参数，其他方向的border-other方向：**不同高度**实心**透明**；可以设置三个方向。(3)在做不同方向的相似直角三角形时，需要设置border-(top|bottom)在某个方向：heightsolidcoral，border-(left|right)在某个方向：**相同高度**实心**透明**；只能设置两个方向。3.效果实现（1）TriangleUp.triangle-up{width:0;高度：0；左边框：50px实心透明；border-right:50pxsolidtransparent;border-bottom:100pxsolidcoral;}（2）TriangleDown.triangle-down{width:0;高度：0；左边框：50px实心透明；border-right:50pxsolidtransparent;border-top:100pxsolidcoral;}（3）TriangleLeft.triangle-left{width:0;高度：0；border-top:50px实心透明；border-right:100px实心珊瑚；border-bottom:50pxsolidtransparent;}（4）TriangleRight.triangle-right{width:0;高度：0；border-top:50px实心透明；左边框：100px实心珊瑚；border-bottom:50pxsolidtransparent;}（5）TriangleTopLeft.triangle-topleft{width:0;高度：0；border-top：100px实心珊瑚；border-right:100pxsolidtransparent;}（6）TriangleTopRight.triangle-topright{width:0;高度：0；border-top：100px实心珊瑚；border-left:100pxsolidtransparent;}（7）TriangleBottomLeft.triangle-bottomleft{width:0;高度：0；border-bottom:100px实心珊瑚；border-right:100pxsolidtransparent;}（8）TriangleBottomRight.triangle-bottomRight{width:0;高度：0；border-bottom:100px实心珊瑚；border-left:100pxsolidtransparent;}
