css - 这个 CSS 是如何工作的

Question

This web page使用垂直菜单，显示一个整洁的小箭头，从当前选定的菜单项指向页面。我检查了 Chrome 中的代码并发现了以下内容。

1. 对于显示箭头的 anchor ，标记是

2. <一个...> ::前 “欢迎”

对应的CSS是

aside li.current a:before
{
 content:"";
 border-color:transparent transparent transparent #fff;
 border-style:solid;
 border-width:10px;
 width:0;height:0;position:absolute;left:-30px;
}

我很清楚这里发生了什么，但我还不太明白最终结果是一个指向左边的三 Angular 形是怎么回事。也许比我更了解 CSS 的人能够解释？

Answer 1

您使用了右上角和底部透明的边框颜色，因此它将采用左侧主 div 的颜色。同样，正如您使用 a:before 一样，在每个 a 标签开始之前，它会创建这种结构，其中没有内容，并且具有绝对位置，您可以将其设置为三 Angular 形 View ...

如果您从代码中删除透明并为边框赋予颜色，您可以看到它最初就像一个简单的方框。因此，这是使用 CSS 制作形状的 CSS 提示和技巧。