Html / Css Pseudo-Triangle

Question

I am trying to create a triangle shape with pseudo-elements. as shown in the picture below.

But this is what I get.

Here is what I have tried so 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; } 

Answer 1

The problem is using the border. you can check this link How do CSS triangles work? , and you will understand how the border works and why you get this result.

An alternative solution is to use rotation and border as follows:

 .box { border: 1px solid; margin: 50px; height: 50px; position:relative; background: #f2f2f5; } .box:before { content: ""; position: absolute; width: 20px; height: 20px; border-top: 1px solid; border-left: 1px solid; top: -11px; left: 13px; background: #f2f2f5; transform: rotate(45deg); } 

 <div class="box"> </div> 

And if you want your arrow box to be transparent, here is another trick to achieve it (since the above solution considers solid color as a background):

 body { margin:0; background-image:linear-gradient(to right,yellow,pink); } .box { border: 1px solid; border-top:transparent; /*make border-top transparent*/ margin: 50px; height: 50px; position:relative; } .box:before { content: ""; position: absolute; width: 20px; height: 20px; border-top: 1px solid ; border-left: 1px solid; top: -11px; left: 13px; transform: rotate(45deg); } /* Use after element to mimic the border top with a gap using linear gradient*/ .box:after { content: ""; position: absolute; left:0; right:0; height: 1px; background-image:linear-gradient(to right,black 10px,transparent 10px,transparent 39px,black 39px); } 

 <div class="box"> </div>