我怎样才能使用CSS创建一个箭头？

2018-07-02 02:16:56

这个问题在这里已经有了答案：

CSS三角形如何工作？ 18个答案

我以前不知道这个技巧，但我想我理解它。下边框不是方形的，它的侧面有斜面。左边界将在顶部和底部倾斜。这是不同颜色的边界干净地相遇。由于箭头元素的高度和宽度均为0，因此边框段在底部的宽度与您在边框规则中指定的宽度相同，但宽度缩小为0px（容器的大小）。

您可以通过设置不同的边框厚度或更改边框规则的“边”来使用效果。 “箭头”总是指向与规则中设置的方向相反的方向。下边框“点”起来; 一个右边界“点”离开。

这是一个快速图表：

左边是箭头戏法。右边是容器有一些尺寸的更典型的边界。

拿一盒。假设它有5个像素高和5个像素宽。现在说它有一个4px的边框。以下是您应该设想的内容：http://jsfiddle.net/FrsGR/190。

.arrow { // box
   height: 5px;
   width: 5px;
   border: 4px solid blue;
}

现在想象这个盒子没有宽度或高度，所以你只剩下边框：http://jsfiddle.net/FrsGR/885/。

.arrow { // box with no width/height
   height: 0;
   width: 0;
   border: 4px solid blue;
}

他们现在重叠在一起，这就是创造箭头时发生魔法的地方。重叠线从每个角对角线绘制到中心。所以，最终结果是顶部，左侧和右侧的透明三角形，底部有一个黑色三角形。希望有所帮助！

很好的参考：CSS三角形是如何工作的？

CSS在.arrow中指定的尺寸为4px的点（没有宽度/高度，但有一些x，y坐标）创建边框。这就像创建一个半径为4px的圆，除了由于CSS边框的性质，“圆”实际上是一个正方形。

您可以通过以下方式查看4px半径方形的所有四个quandrants：

.arrow.up {
    border-top-color:blue;
    border-right-color:green;
    border-left-color:red;
   border-bottom-color: #000;
}

下面是放大示例，使用40px而不是4px的大小：

http://jsfiddle.net/dqB32/1/

链接地址: http://www.djcxy.com/p/89471.html