html

css

pseudo-element

css-transforms

I am trying to create a triangle shape with the pseudo elements. like the one in the image below.

But this is what i get.

Here is what i have tried this far.

.container .form--container:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 130px;
    width: 28px;
    height: 28px;
    transform: translate(-1rem, -100%);
    border-left: 1.5rem solid #979797;
    border-right: 1.5rem solid #979797;
    border-bottom: 1.5rem solid white;
}

Solution 1

The issue is with the use of border. you can check this link How do CSS triangles work? and you will understand how border works and why you get this output.

An alternative solution is to use rotation and border like this :

And in case you want your box with the arrow to be transparent, here is another trick to achieve it (as the above solution consider solid color as background):

Here is another version with dashed border: