Tooltip with a triangle arrow with dashed border

Question

I am trying to create a popup tooltip that has a triangle arrow on the bottom. The problem is that when the border is dahsed, then the arrow looks like a rotated cube (which it is).

Is there a way to cut the top triangle from it and also cut the bottom border where the triangle is?

Here is my CSS:

<div class="new-field-popup"></div>

.new-field-popup{
    position: absolute;
    width: 200px;
    height: 57px;
    padding: 20px;
    border-radius: 5px;
    top: 10px;
    left: 10px;
    border: 1px dashed rgb(177, 177, 177);
}

.new-field-popup:after{
    content: '';
    border: 1px dashed rgb(177, 177, 177);
    position: absolute;
    left: 110px;
    bottom: -10px;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
}

I am t trying to achieve the end result to look like this:

See JSFiddle here

related : https://stackoverflow.com/questions/47956092/html-css-triangle-with-pseudo-elements/47956145#47956145 in case you will also need transparency — Temani Afif, Nov 03 '18 at 09:13

score 4 · Accepted Answer · answered Nov 03 '18 at 08:56

you were nearly there.

css update:

.new-field-popup:after{
/* change your border rule to just bottom and right */
    border-bottom: 1px dashed rgb(177, 177, 177);
     border-right: 1px dashed rgb(177, 177, 177);
/* add a background colour to hide the bit of other border */
     background-color:white;
}

https://jsfiddle.net/odt1xa9L/2/

Tooltip with a triangle arrow with dashed border

1 Answers1