简介本文简单介绍了如何使用CSS边框在页面上绘制三角形，包括几种典型的三角形绘制，同时也介绍了几个简单的应用场景。使用边框绘制三角形的方法只是众多方案中的一种，大家根据项目的实际情况选择最适合项目的方案。1基本原理在CSS中，我们可以使用四个属性来绘制三角形：border-top、border-left、border-bottom和border-left。基本实现原理请参考下面的demo代码及其运行结果。核心代码：.box{width:50px;高度：50px；border-top：50px纯红色；左边框：50px纯蓝色；右边框：50px纯绿色；border-bottom:50pxsolidyellow;}运行结果：Demo代码从上面的代码和运行结果不难看出三角形的绘制方法。我们只需要将.box的长宽都设置为0，就可以得到四个等腰三角形。然后将不想保留的三角形的边框颜色设置为透明色（即：border-color:transparent）来隐藏不想保留的三角形。这样就完成了三角形的绘制。2画三角形2.1等边三角形等边三角形（又称正三角形）是三条边相等，三个内角都为60°的三角形。它是一种锐角三角形。等边三角形也是最稳定的结构。2.1.1尖角向上：.triangle-up{width:0;高度：0；border-bottom:100px纯红色；左边框：57.735px实心透明；border-right:57.735pxsolidtransparent;}Democode2.1.2Pointeddown:.triangle-down{width:0;高度：0；border-top：100px纯红色；左边框：57.735px实心透明；border-right:57.735pxsolidtransparent;}Democode2.1.3Sharpcornertotheleft:.triangle-left{width:0;高度：0；右边框：100px纯红色；border-top:57.735px实心透明；border-bottom:57.735pxsolidtransparent;}Democode2.1.4Sharpcornertotheright:.triangle-right{宽度：0;高度：0；左边框：100px纯红色；border-top:57.735px实心透明；border-bottom:57.735pxsolidtransparent;}Democode2.2等腰直角三角形等腰直角三角形是一种特殊的等腰三角形，它的两个底角相等，都是45°；两腰等长。2.2.1左上右角：.triangle-top-left{width:0;高度：0；border-top：100px纯红色；border-right:100pxsolidtransparent;}演示代码2.2.2右上角:.triangle-top-right{width:0;高度：0；border-top：100px纯红色；border-left:100pxsolidtransparent;}Democode2.2.3左下右角:.triangle-bottom-left{width:0;高度：0；border-bottom:100px纯红色；border-right:100pxsolidtransparent;}Democode2.2.4右下右角:.triangle-bottom-right{width:0;高度：0；border-bottom:100px纯红色；border-left:100pxsolidtransparent;}DemoCode3相关应用3.1Popover组件Popover或tooltip一般使用三角形，三角形清晰，加强指向功能。类似于Bootstrap的Popover和Tooltip组件都使用了边框三角形的实现。演示代码上面的演示只实现了顶部的弹出框，其他方向的弹出框可以参考上面的实现方法。3.2视频播放按钮视频播放按钮（Playbutton）可以用边框三角形的形式实现。演示代码三角形的应用场景有很多，比如下拉菜单（dropdownmenu），或者“赞”和“下车”按钮等，实现三角形作为边框只是众多解决方案中的一种。您可以根据实际项目选择小图标方案或SVG方案。
