Html e Css: Divisori inclinati adattivi.

Stai cercando un esempio semplice di un blocco inclinato o meglio di un "div" a forma trapezioidale? Qui di seguit...

Stai cercando un esempio semplice di un blocco inclinato o meglio di un "div" a forma trapezioidale? Qui di seguito puoi vedere un esempio responsive con il codice html e css relativo.

<style> body { margin:0px;} .colour-block { background:#823A9C; padding: 10% 10% 5% 10%; color:#fff;} .white-block { background:#fff; padding: 10% 10% 5% 10%; color:#823A9C;} .bianco {color:white;} /* SKEW CLOCKWISE */ .skew-cc { width:100%; height:50px; position:relative; left:0px; background: linear-gradient(to right bottom, #823A9C 49%, #fff 50%), linear-gradient(-50deg, #ffffff 16px, #000 0); } /* SKEW COUNTER CLOCKWISE */ .skew-c { width:100%; height:50px; position:relative; left:0px; background: linear-gradient(to left bottom, #fff 49%, #823A9C 50%); } </style> <div class="skew-c"></div> <div class="colour-block"> <h2 class="bianco">Divisori di pagina inclinati e adattivi in base al dispositivo.</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div> <div class="skew-cc"></div> <div class="white-block"> <h2>In senso antiorario inclinato.</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div> <div class="skew-c"></div> <div class="colour-block"> <h2 class="bianco">Inclinato in senso orario.</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div>

Per questo codice ho preso un codice condiviso qui: https://freefrontend.com/css-dividers/#horizontal-dividers e l'ho modificato, ad esempio ho messo <h2> al posto dei <h1> così se hai già un titolo di pagina ha una gerarchia semantica, ed ho modificato il padding ed il colore del titolo su sfondo colorato.
A quel link ci sono altri interessanti divisori.

ESEMPIO CODICE

Divisori di pagina inclinati e adattivi in base al dispositivo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

In senso antiorario inclinato.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Inclinato in senso orario.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.