Triángulo HTML/CSS con pseudo elementos
css3 css-transforms (1)
El problema es con el uso de la frontera. puedes consultar este enlace ¿Cómo funcionan los triángulos CSS? y comprenderá cómo funciona el borde y por qué obtiene esta salida.
Una solución alternativa es usar la rotación y el borde de esta manera:
.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>
Y en caso de que desee que su cuadro con la flecha sea transparente, aquí hay otro truco para lograrlo (como la solución anterior considere el color sólido como fondo):
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;
/* Use gradient to mimic the border top with a transparent gap */
background:linear-gradient(to right,black 10px,transparent 10px,transparent 39px,black 39px) top/100% 1px no-repeat;
}
.box:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-top: 1px solid ;
border-left: 1px solid;
top: -11px;
left: 14px;
transform: rotate(45deg);
}
<div class="box">
</div>
Aquí hay otra versión con borde discontinuo:
body {
margin:0;
background-image:linear-gradient(to right,yellow,pink);
}
.box {
border: 1px dashed;
border-top:transparent; /*make border-top transparent*/
margin: 50px;
height: 50px;
position:relative;
background:
repeating-linear-gradient(to right,black 0,black 3px,transparent 3px,transparent 6px) top left/10px 1px,
repeating-linear-gradient(to right,black 0,black 3px,transparent 3px,transparent 6px) top right/calc(100% - 40px) 1px;
background-repeat:no-repeat;
}
.box:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-top: 1px dashed;
border-left: 1px dashed;
top: -11px;
left: 13px;
transform: rotate(45deg);
}
<div class="box">
</div>
Estoy tratando de crear una forma de triángulo con los pseudo elementos. como el de la imagen de abajo.
Esto es lo que he intentado hasta aquí.
.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;
}