Tomsz Comasz Tomsz Comasz - 6 months ago 20
CSS Question

matching triangle to div element

I'm trying to add a triangle before a div in navigationTable using css, but I cant correctly match it with a div element.

Here's code

tmp tmp tmp


How solve this problem?

edit:
second problem: how to make edges of triangle smooth?

Answer

Absolute positioned element will be relative to the next parent element with relative (or absolute) positioning.

.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; 
}

So what did you need. You need(ed) .elem to be relative, so that .elem:before could be positioned relative to that. You've also "forgot" to set top property (to 0).