将三角形与div元素匹配

Question

我尝试使用css在navigationTable中的div之前添加一个三角形，但是我无法将它与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：before可以相对于那个定位。您还“忘记”设置top属性（为0）。