CSS 构造三角箭头
作者：互联网
总所周知，在CSS的世界中有很多样式和效果看起来简单实则不那么简单，就比如一个小小的▲符号元件，也是通过指定样式产生的，而并不是开箱即用的产物。
要掌握如何设计一个理想的▲符号元件，我们就必须先深入了解边框border的结构组成。
代码如下：
.frame {
background-color: #ccc;
height: 150px;
width: 130px;
line-height: 150px;
text-align: center;
border: 10px solid;
border-color: #000 #f00 #0f0 #00f;
}
<div class="frame">photo frame</div>
输出结果：
photo frame可以明显看见的是四条边框并不是矩形而是梯形，就如同相框的边一样。然而当你只设计了其中一条边框的时候，浏览器会裁去左右多余的小三角形，如同这样：
photo frame看到这里其实就很明确了，要设计一个理想的▲符号元件我们可以利用border的性质着手，就像这样：
如上图右下角所示，我们可以将boredr的下方的梯形边裁掉一个平行四边形从而得到一个等腰三角形。具体办法就是首先我们使梯形的上底为0，也就是成为一点，而下底等长缩减，这样就得到了一个等腰三角形。
具体代码思路如下：
<html>
<head>
<style>
.frame2 {
content: "";/* 指定元素内容为空，使得梯形边上底为0，从而每边得到一个等腰三角形 */
border: 10px solid;/* 指定宽度样式 */
border-color: #000 transparent transparent transparent;/* 保留一边，其余边透明去除 */
}
</style>
</head>
<body>
<span class="frame2"></span><!-- 内联元素不会占一行导致上下边无法形成等腰三角形 -->
</body>
</html>
效果如下：
标签：photo,frame,三角,梯形,等腰三角,箭头,border,transparent,CSS 来源： https://www.cnblogs.com/mxyulin/p/15979891.html