соответствие треугольника элементу div

Question

Я пытаюсь добавить треугольник перед div в navigationTable с помощью css, но я не могу правильно сопоставить его с элементом div.

Here's code

tmp tmp tmp 

Как решить эту проблему?

Редактировать: Вторая проблема: как сделать края треугольника гладкими?

Answer 1

Absolute Позиционированный элемент будет относиться к следующему родительскому элементу с позицией relative (или absolute).

.elem{ 
    color: dodgerblue; 
    font-weight: bold; 
    padding: 10px 20px; 
    position:relative; //YOU NEED THIS LINE 
} 

.elem:hover:before { 
    display: inline-block; 
    content: ""; 
    top:0; //YOU NEED THIS LINE 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 10px 15px 10px 0; 
    border-color: transparent red transparent transparent; 
    left: -15px; 
    position: absolute; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
} 

Так что вам нужно. Вам нужно (ed) .elem быть относительным, так что .elem: раньше может быть размещен относительно этого. Вы также «забыли» установить значение top (до 0).