Html 将三角形匹配到div元素

我试图使用css在navigationTable中的div之前添加一个三角形，但无法将其与div元素正确匹配

如何解决这个问题

编辑：

---

第二个问题：如何使三角形的边平滑？

绝对定位的元素将相对于下一个父元素进行
相对定位（或
绝对定位）

.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）。
请编辑您的问题并添加代码，而不是链接。所以有一个语法突出显示功能，工作得很好…耶！THX兄弟！它起作用了！另外，也许你们知道如何使三角形的边光滑？这并不像你们在那个里所知道的那个样是一种练习。问一个问题，我给你一个你想要的答案，你将我的答案标记为正确答案，然后将其删除为正确答案，因为你还有其他问题。。。。只是说。。。。你所说的“如何使三角形的边光滑”是什么意思？你做了什么来制作一个三角形。您可以使用边框宽度和.elem:hover:before的定位来获得更好的结果.tl；dr播放边框宽度和位置。elem:hover:before可获得更好的效果。您正在操作DOM元素，因此边（平滑度）取决于该参数
.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; 
}