标签：相关 下拉菜单 pop src run 1.2 1.3 视频播放 top
本文简要阐述了用CSS边框的方法在页面上绘制三角形，包括几种典型的三角形绘制，还介绍了几个简单的应用场景。利用边框绘制三角形方法只是众多方案中的一种，大家根据项目实际，选用最适宜项目的方案。
在CSS中，我们可以利用border-top、border-left、border-bottom、border-left四个属性来绘制三角形。实现的基本原理参见下面的演示代码及其运行结果。
.box {
width: 50px;
height: 50px;
border-top: 50px solid red;
border-left:50px solid blue;
border-right: 50px solid green;
border-bottom: 50px solid yellow;
}
从以上代码及运行结果不难想出绘制三角形的办法，我们只要将 .box 的长度和宽度都设成0，就可以得到四个等腰三角形。再将不想保留的三角形边框颜色设置成透明色（即：border-color : transparent）就可以隐藏掉不想保留的三角形。从而完成三角形的绘制。
等边三角形（又称正三边形），为三边相等的三角形，其三个内角相等，均为60°，它是锐角三角形的一种。等边三角形也是最稳定的结构。
.triangle-up {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 57.735px solid transparent;
border-right: 57.735px solid transparent;
}
.triangle-down {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 57.735px solid transparent;
border-right: 57.735px solid transparent;
}
.triangle-left {
width: 0;
height: 0;
border-right: 100px solid red;
border-top: 57.735px solid transparent;
border-bottom: 57.735px solid transparent;
}
.triangle-right {
width: 0;
height: 0;
border-left: 100px solid red;
border-top: 57.735px solid transparent;
border-bottom: 57.735px solid transparent;
}
等腰直角三角形是特殊的等腰三角形，它的两底角相等，都是45°；它的两腰长度相等。
.triangle-top-left{
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
.triangle-top-right {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
.triangle-bottom-left{
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
.triangle-bottom-right {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
弹出框(popover)或提示框(tooltip)一般都会用到三角形，三角形明确并加强了指向作用。类似于Bootstrap的Popover和Tooltip组件都用到了边框三角形的实现方式。
上述演示只是实现了顶部弹出框，其它方向弹出框参考上述实现方式即可。
视频播放按钮(Play button)可以采用边框三角形的实现方式。
三角形的应用场景还有很多，比如下拉菜单(dropdown menu)中，或者是“顶”及“踩”按钮等。
边框实现三角形只是众多方案之一，大家可以根据项目实际，选择小图标方案或选用SVG方案。
标签：相关 下拉菜单 pop src run 1.2 1.3 视频播放 top
原文地址：https://www.cnblogs.com/ifat3/p/8837025.html
