![](https://secure.gravatar.com/avatar/069849e93b798a9aee2c38a6d6b6a85d?s=150&d=https%3A%2F%2Fwww.maxlaferla.it%2Fwp-content%2Fthemes%2Fmax%2Fassets%2Fgravatar.gif&r=g)
Pubblicato da: Max
In data:
8 Dic 2021
Tempo di lettura:
![Angolo piegato in CSS in 2 minuti](https://www.maxlaferla.it/wp-content/uploads/2021/12/img-angolo-piegato-300x300.png)
Angolo piegato in css:
Ti piacerebbe sapere come realizzare in CSS un effetto di piegatura foglio? Bene! Guarda i video che seguono, e scoprirai come realizzarlo facilmente.
Iniziamo impostando la pagina minima html.
Inseriamo il titolo principale della pagina(<h1>), e stilizziamo body e h1.
Creiamo la struttura del nostro foglio, inserendo una classe che chiameremo appunto “foglio”. All’interno di questo contenitore con classe “foglio”, inseriamo 3 paragrafi(<p>) , che come testo avranno il mitico Lorem ipsum dolor sit amet…
Inseriamo le dichiarazioni di stile per il selettore di classe “foglio”, e assegniamo anche un colore al paragrafo <p>.
Ecco cosa abbiamo ottenuto a questo punto
![Angolo piegato in CSS angolo piegato in CSS](https://www.maxlaferla.it/wp-content/uploads/2021/12/Schermata-2021-12-08-alle-17.59.16-1024x559.png)
Adesso è arrivato mil momento di creare la nostra piega sul lato superiore destro del foglio. Per farlo utilizzeremo la tecnica del pseudo-elemento CSS :before, che inserisce un contenuto prima dell’elemento a cui lo applichiamo.
Vediamo il video!
Abbiamo ottenuto il nostro bel foglio piegato. Ovviamente puoi personalizzarlo come vuoi, ad esempio aumentando la piega o diminuendola, puoi modificare i colori o le ombre, cercando sempre di mantenere un aspetto visivo quanto più realistico possibile.
![angolo piegato in CSS](https://www.maxlaferla.it/wp-content/uploads/2021/12/img-angolo-piegato-1024x558.png)
Spero che questo articolo ti sia utile per i tuoi progetti.
Ci vediamo alla prossima 🙂
Ti allego il download dei file utilizzati.
Clicca sul tasto download e dopo decomprimi il file zip.
Se vuoi puoi anche guardare il video completo: