Html/Css Triángulo con pseudoelementos

Resuelto Kudos asked hace 6 años • 1 respuestas

Estoy intentando crear una forma de triángulo con los pseudoelementos. como el de la imagen de abajo.ingrese la descripción de la imagen aquí

Pero esto es lo que obtengo.ingrese la descripción de la imagen aquí

Esto es lo que he probado hasta ahora.

.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;
}
Kudos avatar Dec 24 '17 04:12 Kudos
Aceptado

El problema es 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 este resultado.

Una solución alternativa es utilizar rotación y borde como este:

Mostrar fragmento de código

Y en caso de que quieras que tu cuadro con la flecha sea transparente, aquí tienes otro truco para lograrlo (como en la solución anterior, considera el color sólido como fondo):

Mostrar fragmento de código

Aquí hay otra versión con borde discontinuo:

Mostrar fragmento de código

Temani Afif avatar Dec 23 '2017 21:12 Temani Afif