Tips & Códigos CSS

tips-css.md

ABSOLUTE Y RELATIVE

1. El elemento padre debe tener position: relative;
2. El elemento a posicionar debe tener position: absolute + top, bottom, left, right (depende lo que se quiera posicionar).

Efecto Skew en Background

1. Agregar un div arriba y otro abajo. Si se quiere aplicar en el header solo abajo, en el footer solo arriba. IMPORTANTE: El contenedor padre tiene que tener position: relative y overflow: hidden;

Skew - Derecha a Izquierda

.skew-arriba{
    position: absolute;
    top: 0;
    left: 0;
    border-width: 20vh 0 0 100vw;
    border-style: solid;
	border-color: var(--white) transparent transparent transparent;
	z-index: 999;
}


.skew-abajo{
        position: absolute;
        bottom: 0;
    	left: 0;
    	border-width: 15vh 0 0 100vw;
        border-style: solid;
        border-color: transparent transparent transparent var(--white);
    }

Skew - Derecha a Izquierda

.skew-arriba{
    position: absolute;
    top: 0;
    left: 0;
    border-width: 20vh 100vw 0 0;
    border-style: solid;
	border-color: var(--white) transparent transparent transparent;
	z-index: 999;
}

.skew-abajo{
    position: absolute;
    bottom: 0;
	left: 0;
	border-width: 0 0 15vh 100vw;
    border-style: solid;
    border-color: transparent transparent var(--white) transparent;
}