Html/Css Dreieck mit Pseudo-Elementen

Question

Ich versuche, eine Dreiecksform mit den Pseudo-Elementen zu erstellen. wie der im Bild unten.

Aber das ist was ich bekomme.

Hier ist, was ich bisher versucht habe.

.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

Das Problem ist mit der Verwendung von Grenze. Sie können diesen Link How do CSS triangles work? überprüfen und Sie werden verstehen, wie Grenze funktioniert und warum Sie diese Ausgabe erhalten.

Eine alternative Lösung Rotation und Grenze wie folgt zu verwenden:

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

Und falls Sie möchten, dass Ihre Box mit dem Pfeil transparent sein, hier ist eine andere Trick, um es zu erreichen (wie die obige Lösung einfarbig als Hintergrund betrachten):

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>