Come creare div di diverse forme e dimensioni in CSS3

Blog Problem Solving

Con CSS3 e HTML5 e' possibile cambiare la forma dei DIV e stilizzare il contenuto dei DIV, vediamo come.

formare-div-forme-differenti-angolare2

One-page-website sta diventando sempre più popolare nel web, per chi non lo sapesse, one-page-website e’ quella tecnica che prevede di mettere tutte le parti relative al sito in una sola pagina, così facendo il menù non aprirà una nuova pagina ma ridirezionerà lo schermo su una diversa altezza della stessa pagina. Questo tipo di filosofia è molto versatile con piccoli business che vogliono visualizzare tutti i loro servizi in poche frasi in una sola pagina.

In oltre one-page-website si presta molto a i tipi di device con touch-screen, infatti scorrendo verso il basso col dito si possono vedere velocemente tutti le carattestiche del business. La home page di questo sito è fatta con questa filosofia.

Ma one-page-website diventa un pò banale se i div della pagina hanno tutti la stessa forma, in questo tutorial vediamo come creare e formare div di differente forme per rendere la nostra pagina più originale. Ecco alcuni esempi delle pagine a cui faccio riferimento:

Useremo la proprietà del CSS chiamata “clip-path” la cui sintassi è

/* Keyword values */
clip-path: none;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* Image values */
clip-path: url(resources.svg#c1);

/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

il quale adatta il div a cui è associata a una forma, in altre parole modella come una oggetto il div a cui è associata. Le forme che possono essere associate sono circle(), ellipse(), inset()polygon().
All’interno delle parentesi inseriremo una serie di punti espressi in pixel o percentuale che definiscono i confini del div così come lo fogliamo formare. Esempio:

.wrap{
        height: 336px;
        width: 100%;
        -webkit-clip-path: polygon(10px 10px, 900px 20px, 800px 300px, 50px 260px);
        clip-path: polygon(10px 10px, 900px 20px, 800px 300px, 50px 260px);
    }

Nel nostro caso vogliamo creare dei div che coprino la larghezza della pagina completamente e che siano responsive, quindi useremo delle percentuali al posto di numeri espressini con pixel.

formare-div-forme-differenti-angolare

Per esempio vogliomo creare un div nella cima della nostra pagina che appaia come un poligono con il bordo obliquo, la parte superiore sarà compresa da i punti (0, 0) e (100%, 0) la parte superiore sarà una linea espressa in percentuale tra i punti (100%, 70%) e (0, 100%) il chè espresso in CSS si scrive:

.top-div{
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
   clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}

La parte superiore del div sottostante deve combacciare perfettamente con il div appena formato, quindi afrà la forma:

.second-div{
   -webkit-clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
   clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
}

E così via.

Un altro esempio comune è un div con un triangolo ritagliato nella parte inferiore:

.top-div{
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 50% 93%, 45% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 50% 93%, 45% 100%, 0 100%);
}
.second-div{
    -webkit-clip-path: polygon(0 7%, 45% 7%, 50% 0, 55% 7%, 100% 7%, 100% 100%, 0 100%);
    clip-path: polygon(0 7%, 45% 7%, 50% 0, 55% 7%, 100% 7%, 100% 100%, 0 100%);    
}

La proprietà clip-path può anche essere utilizzata per ritagliare immagini, la tecnica usata e la sintassi è praticamente la stessa.

clip-path-per-ritagliare-immagini

Bennettfeely.com

Il sito bennettfeely.com mette a disposizione una utilissima applicazione online gratuita per formare le vostre proprietà CSS e copiarle e incollarle nel vostro Style Sheet, sulla parte sinistra dello schermo ci sono varie forme pronte per essere usate.

Ecco il link: http://bennettfeely.com/clippy/

Questa proprietà non è supportata da Internet Explorer e Edge. Firefox supporta clip-path solo parzialmente, ma la versione 47 e superiori i Firefox supporta la proprietà con la flag layout.css.clip-path-shapes.enabled abilitata.

Chrome, Safari e Opera hanno bisogno del suffisso -webkit- per funzionare. Clicca su questo link per avere più informazioni sul supporto dei browsers.

Click to Leave a Comment

You May Like

woocommerce-min-max-checkout-plugin

Woocommerce Min Max Checkout is a plugin that extends your Woocommerce e-commerce in order to give you the possibility to set the minimum or maximum checkout amount or in order to set a minimum or maximum order quantity on the cart or checkout pages. With Woocommerce Min Max Checkout you can also set e customizable […]

February 12, 2022
Read More...

How to add Read More/Read Less button next to a too long HTML element. This tutorial will take you through how to display a certain number of rows of an HTML element and hide the rest of it, then we will see how to read a clickable “Read More” element at the end of the […]

January 15, 2022
Read More...

Today we try to analyze the error that appears on the browser inspector and that is a bit tricky to fix and we try to understand what is causing the error, the error is called “Failed to load resource: net::ERR_BLOCKED_BY_CLIENT“. This error is always followed by an URL, this URL is the link that has […]

May 28, 2021
Read More...