这个CSS是如何工作的

Question

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

1. 对于显示箭头的锚点，标记为

   ＆lt; li class =“current”＆gt; ＆LT;一...＆GT; ：：之前 “欢迎” ＆LT; / A＆GT;

相应的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;
}

我对这里发生的事情有一个很好的了解，但我还不能弄清楚最终结果是指向左边的三角形是怎么回事。也许有人比我能解释的更了解CSS？

Answer 1

你使用了右上角和底部透明的边框颜色，因此它将采用你的左主div的颜色。另外正如你在每个标签开始之前所使用的那样：它会创建这种结构，其中没有内容，并且位置绝对可以将其设置为三角形视图......

如果从代码中删除透明并为边框赋予颜色，则可以看到原来它就像简单的方框一样。所以，它是一个使用CSS制作形状的CSS技巧和窍门。