Estoy programando una web y ya logré hacer lo que quería viendo un vídeo de youtube. El asunto es este: no logro entender bien qué es lo que estoy haciendo en cuanto a las propiedades de border-width
. Tengo este código css:
.ses{
position: absolute;
width: 100%;
bottom: 0;
border-width: 9vh 0 0 100vw;
border-style: solid;
border-color: transparent transparent transparent ghostwhite;
}
Ese div
vacío lo que me genera es una diagonal en el padre para hacer que se vea el efecto de recortado en diagonal. Entiendo que el border-style
es sólido XD y que tengo 3 colores transparentes, que es lo que me deja ver el fondo gris que ya tengo en el padre. Y tengo uno más que es el color blanco, que es el que genera el efecto de corte.
Ya busqué en la documentación pero no encuentro nada específico cuando le das 4 valores al border-width
o al border-color
. Entonces...
¿Será que alguien me puede explicar qué esta pasando? (ya modifiqué los valores y sí hay diferencia, pero no logro entender qué hace)
.fondo-barra{
background-color: #303030;
position: relative;
height: 25vh;
}
Ese es el padre.