Как работает этот CSS

Question

This web page использует вертикальное меню, в котором показана аккуратная стрелка, указывающая на текущее выбранное меню на страницу. Я изучил код в Chrome и нашел следующее.

1. Для анкера, который отображает стрелку Разметка

   < литий класс = "ток" > < и ... > :: до того "Добро пожаловать" </а >

Соответствующий 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.