3

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.

introducir la descripción de la imagen aquí

1 respuesta 1

6

Tanto para border-width como para border-color cuando le pasas cuatro parámetros estás indicando que cada uno de ellos hace referencia a uno de los lados del "cuadrado" (empezando por arriba y en sentido de las agujas del reloj).

Por lo que la regla border-width: 9vh 0 0 100vw; asigna un grosor de borde de 9vh para el borde superior, 0 para el derecho, 0 para el inferior y 100vw para el izquierdo.

Sería una manera abreviada de escribir:

border-top-width: 9vh;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 100vw;

Con el color sucede lo mismo.

También podrías pasarle 3, 2 o 1 parámetros, afectando a diferentes lados en cada caso.

Referencia: border-color

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.