Página Web - Fondos Diagonales

[TypoC]

Hola que tal, espero que todo bien gente, les comento que soy nuevo en este mundo, aunque llevo ya varios meses en el área de html, css y aprendiendo js y jquery.

Les comento, que ando practicando unas diagramaciones y vi este estilo de página, y he buscado en google cual es la manera de realizarlas. Si alguien sabe de algun tutorial o como se maneja el css para realizar esos background.

Muchas gracias y saludos.


Pagina como referencia: https://www.psd2html.com/contests/ev...mpaign=contest

[xfxstudios]

presiona f12 en chrome e inspecciona el css, encontre algo como esto:

Código CSS:

transform: rotate(-14deg);
 

claro ha de haber otros valores pero ese seria el que las coloca en diagonal

[TypoC]

Yo medio me imagine eso sabes, el transform pero no me cuadra tampoco hahaha, tendria que rotar todo un "Container" por lo que veo. En general debe tener ciertos codigos base para lograr ese efecto, el cual me encanta para una pagina web sencilla.

[fede5426]

En realidad si es eso.. solamente rota el contenedor de la lista y ya.

[xfxstudios]

Iniciado por TypoC

Yo medio me imagine eso sabes, el transform pero no me cuadra tampoco hahaha, tendria que rotar todo un "Container" por lo que veo. En general debe tener ciertos codigos base para lograr ese efecto, el cual me encanta para una pagina web sencilla.

como te dije presiona f12 y analiza el codigo css de la pagina ese es solo uno de los apartes que debews colocar para lograr el efecto, hay otros como el z-index, padding entre otros para lograr el efecto completo

[TypoC]

Ajaa ! ya hoy realize una pagina con ciertas div diagiones como si fueran separadores de cada seccion, use este codigo:

<div class="containers">
<div class="rotate"></div>
</div>

.containers{
height:210px;
width: 100vw;
overflow:hidden;
position:relative;
}
.rotate{
background-color: #0492dc;
height: 20%;
position:absolute;
transform: rotate(7deg);
transform-origin: 0 0 0;
width: 150%;
padding: 10px;
margin-left:-80px;


}

El problema ahora es, que como cada div(diagonal) esta dentro de una seccion, al final la seccion es un cuadrado en donde se encuentra la diagonal, por ende si quiero incrementar la altura de la diagonal tengo que incrementar la altura de la seccion. No entiendo como hacer un div que sea diagonal y que en la seccion de abajo no abarque tanto espacio(seccion). No se si me entienden.



Gracias !!

[TypoC]

LISTO !! haha , tanto pensar para que en un rato sin pensar en ello te llegue un codigo a la cabeza y listo

miren lo que hice:

Solamente quite el contenedor en donde se encuentra el div(diagonal) y ya ! y al body le pongo overflow hidden y ya !.

Código:

<!-- <div class="containers"> -->
        <div class="rotate bg-gray"></div>
<!-- </div>

Quite el contenedor y deje solo al div.rotate que seria la diagonal.

Creo que es asi como juegan con ese tipo de fondos diagonales ! :), bueno, no los fastidio mas por ahora.

Gracias y saludos hahaha