Massimiliano Carnevale

Massimiliano Carnevale

Co-Founder
Stile e grafica

Figure CSS base: rettangolo, quadrato, cerchio, ovale, triangolo e poligoni.

Come creare delle figure geometriche semplici attraverso i CSS e come riutilizzarne il codice con SCSS.

Pubblicato il 20/08/2015

Iniziamo oggi con una nuova sezione: vedremo come creare delle figure geometriche, semplici e non solo, attraverso i css. Quando possibile inseriremo anche codice SCSS affinché possiate riutilizzarli facilmente.
PS se non sapete cosa sia SCSS è il momento di informarsi. PPS a breve inseriremo qualche articolo per approfondire il discorso.

In questo articolo inseriremo da subito le principali figure realizzabili con i CSS. A breve pubblicheremo articoli che spiegheranno come siamo arrivati alla formulazione delle stesse e considereremo delle figure più complesse

 

Quadrato

codice CSS
.quadrato {
	width:100px;
	height:100px;
	background:orange;
}
codice SCSS
@mixin quadrato($lato, $sfondo) {
	width:$lato;
	height:$lato;
	background:$sfondo;
}
.quadrato {
	@include quadrato(100px, orange);
}
blocco HTML

 

Rettangolo

codice CSS
.rettangolo {
	width:200px;
	height:100px;
	background:orange;
}
codice SCSS
@mixin rettangolo($base, $altezza, $sfondo) {
	width:$base;
	height:$altezza;
	background:$sfondo;
}
.rettangolo {
	@include rettangolo(200px, 100px, orange);
}
blocco HTML

 

Cerchio

codice CSS
.cerchio {
	width:100px;
	height:100px;
	border-radius:50px;
	background:orange;
}
codice SCSS
@mixin cerchio($diametro, $sfondo) {
	width:$diametro;
	height:$diametro;
	border-radius:$diametro/2;
	background:$sfondo;
}
.cerchio {
	@include cerchio(100px, orange);
}
blocco HTML

 

Ovale

codice CSS
.ovale {
	width:200px;
	height:100px;
	border-radius:100px/50px;
	background:orange;
}
codice SCSS
@mixin ovale($asseMaggiore, $asseMinore, $sfondo) {
	width:$asseMaggiore;
	height:$asseMinore;
	border-radius:#{$asseMaggiore/2}/#{$asseMinore/2};
	background:$sfondo;
}
.ovale {
	@include ovale(200px, 100px, orange);
}
blocco HTML

 

Parallelogramma

codice CSS
.parallelogramma {
	width:200px;
	height:100px;
	-moz-transform:skew(30deg);
	-webkit-transform:skew(30deg);
	-ms-transform:skew(30deg);
	-o-transform:skew(30deg);
	transform:skew(30deg);
	background:orange;
}
codice SCSS
@mixin parallelogramma($base, $altezza, $angoloDiBase, $sfondo) {
	width:$base;
	height:$altezza;
	-moz-transform:skew($angoloDiBase);
	-webkit-transform:skew($angoloDiBase);
	-ms-transform:skew($angoloDiBase);
	-o-transform:skew($angoloDiBase);
	transform:skew($angoloDiBase);
	background:$sfondo;
}
.parallelogramma {
	@include parallelogramma(200px, 100px, 30deg, orange);
}
blocco HTML

 

Rombo

codice CSS
.rombo {
	width:100px;
	height:100px; 
	-moz-transform:rotate(45deg) skew(10deg, 10deg);
	-webkit-transform:rotate(45deg) skew(10deg, 10deg);
	-ms-transform:rotate(45deg) skew(10deg, 10deg);
	-o-transform:rotate(45deg) skew(10deg, 10deg);
	transform:rotate(45deg) skew(10deg, 10deg);
	background:orange;
}
codice SCSS
@mixin rombo($diagonaleMaggiore, $angoloDiBase, $sfondo) {
	width:$diagonaleMaggiore;
	height:$diagonaleMaggiore; 
	-moz-transform:rotate(45deg) skew($angoloDiBase, $angoloDiBase);
	-webkit-transform:rotate(45deg) skew($angoloDiBase, $angoloDiBase);
	-ms-transform:rotate(45deg) skew($angoloDiBase, $angoloDiBase);
	-o-transform:rotate(45deg) skew($angoloDiBase, $angoloDiBase);
	transform:rotate(45deg) skew($angoloDiBase, $angoloDiBase);
	background:$sfondo;
}
.rombo {
	@include rombo(100px, 10deg, orange);
}
blocco HTML

 

Triangolo Equilatero

Presentiamo solo il triangolo equilatero. Per gli altri triangoli prepareremo un articolo dedicato a breve.

codice CSS
.triangoloEq {
	width:0;
	height:0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 86px solid orange;
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
codice SCSS
@mixin triangoloEq($lato, $sfondo, $rotazione) {
	width:0;
	height:0; 
	border-left: round($lato/2) solid transparent;
	border-right: round($lato/2) solid transparent;
	border-bottom: round($lato*0.866) solid $sfondo;
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
}
.triangoloEq {
	@include triangoloEq(100px, orange, 0deg);
}
blocco HTML

 

Trapezio Isoscele

codice CSS
.trapezioIs {
    width:100px;
    height:0;
	border-bottom:100px solid orange;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
}
codice SCSS
@mixin trapezioIs($latoMaggiore, $latoMinore, $altezza, $sfondo) {
	width:$latoMinore;
    height:0;
	border-bottom:$altezza solid $sfondo;
    border-left:round(($latoMaggiore - $latoMinore)/2) solid transparent;
    border-right:round(($latoMaggiore - $latoMinore)/2) solid transparent;
}
.trapezioIs {
	@include trapezioIs(200px, 100px, 100px, orange);
}
blocco HTML

 

Pentagono

codice CSS
.pentagono {
	position:relative;
	width:60px;
	border-top:57px solid orange;
	border-left:19px solid transparent;
	border-right:19px solid transparent;
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
	.pentagono:before {
		content:"";
		width:0;
		height:0;
		position:absolute;
		top:-98px;
		left:-19px;
		border-left:49px solid transparent;
		border-right:49px solid transparent;
		border-bottom:41px solid orange; 
	}
codice SCSS
@mixin pentagono($lato, $sfondo, $rotazione) {
    position:relative;
    width:$lato;
    border-top:round($lato*0.951) solid $sfondo;
    border-left:round($lato*0.309) solid transparent;
    border-right:round($lato*0.309) solid transparent;
    -moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
	&:before {
	    content:"";
	    width:0;
	    height:0;
	    position:absolute;
	    top:round($lato*-1.639);
	    left:round($lato*-0.309);
	    border-left:round($lato*0.809) solid transparent;
		border-right:round($lato*0.809) solid transparent;
	    border-bottom:round($lato*0.688) solid $sfondo;
	}
}
.pentagono {
	@include pentagono(100px, orange, 0deg);
}
blocco HTML

 

Esagono

codice CSS
.esagono {
    width:100px;
    height:58px;
	margin-top:29px;
    background:orange;
    position: relative;
    -moz-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(90deg);
}
	.esagono:before {
	    content:"";
	    width:0; 
	    height:0;
	    position: absolute;
	    top:-29px;
	    border-left:50px solid transparent;
	    border-right:50px solid transparent;
	    border-bottom:29px solid orange;
	}
	.esagono:after {
	    content:"";
	    width:0;
	    height:0;
	    position:absolute;
	    bottom:-29px;
	    border-top:29px solid orange;
	    border-left:50px solid transparent;
	    border-right:50px solid transparent;
	}
codice SCSS
@mixin esagono($lato, $sfondo, $rotazione) {
    width:round($lato*1.732);
    height:$lato;
	margin-top:round($lato/2);
    background:$sfondo;
    position: relative;
    -moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
	&:before {
	    content:"";
	    width:0; 
	    height:0;
	    position: absolute;
	    top:round($lato/-2);
	    border-left:round($lato*0.866) solid transparent;
	    border-right:round($lato*0.866) solid transparent;
	    border-bottom:round($lato/2) solid $sfondo;
	}
	&:after {
	    content:"";
	    width:0;
	    height:0;
	    position:absolute;
	    bottom:round($lato/-2);
	    border-top:round($lato/2) solid $sfondo;
	    border-left:round($lato*0.866) solid transparent;
	    border-right:round($lato*0.866) solid transparent;
	}
}
.esagono {
	@include esagono(50px, orange, 90deg);
}
blocco HTML


C'è un modo molto veloce per creare un esagono: usando il carattere Unicode U+2B22:

ma non sempre ciò può fare al caso nostro. Scegliete caso per caso quale codice utilizzare

 

Ottagono

codice CSS
.ottagono {
	width:120px;
	height:50px;
	position:relative;
	background:orange;
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
	.ottagono:before {
		content:"";
		width:50px;
	    height:0;
	    position:absolute;
		top:-35px;
		left:0;
		border-bottom:35px solid orange;
	    border-left:35px solid transparent;
	    border-right:35px solid transparent;
	}
	.ottagono:after {
		content:"";
		width:50px;
	    height:0;
	    position:absolute;
		bottom:-35px;
		left:0;
		border-top:35px solid orange;
	    border-left:35px solid transparent;
	    border-right:35px solid transparent;
	}
codice SCSS
@mixin ottagono($lato, $sfondo, $rotazione) {
	width:$lato+round($lato*0.707)+round($lato*0.707);
	height:$lato;
	position:relative;
	background:orange;
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
	
	&:before {
		content:"";
		width:$lato;
	    height:0;
	    position:absolute;
		top:round($lato*-0.707);
		left:0;
		border-bottom:round($lato*0.707) solid $sfondo;
	    border-left:round($lato*0.707) solid transparent;
	    border-right:round($lato*0.707) solid transparent;
	}
	&:after {
		content:"";
		width:$lato;
	    height:0;
	    position:absolute;
		bottom:round($lato*-0.707);
		left:0;
		border-top:round($lato*0.707) solid $sfondo;
	    border-left:round($lato*0.707) solid transparent;
	    border-right:round($lato*0.707) solid transparent;
	}
}
.ottagono {
	@include ottagono(50px, orange, 0);
}
blocco HTML

Per aggiornamenti, nuove figure e spiegazioni, continuate a seguirci...

Sullo stesso argomento: Figure CSS avanzate Figure CSS speciali

CONDIVIDI SUI SOCIAL
Ueppy Blog

Leggi articoli correlati

Stile e grafica

Figure CSS speciali: fumetto, cuore, infinito e altre forme complesse

Terza parte riguardante la creazione di figure geometriche con il solo aiuto di CSS. Anche in questo caso proponiamo l'astrazione delle stesse via SCSS.

Leggi l'articolo
Stile e grafica

Le rotazioni con i CSS e la compatibilità cross-browser

Come scrivere CSS per ruotare blocchi funzionante su tutti i browser più diffusi e non.

Leggi l'articolo
Stile e grafica

L'ottavina reale e i CSS3

Un omaggio a Francesco Nuti per mostrare la potenza dei CSS3: un colpo da biliardo, sono con i css, senza immagini, video e javascript!

Leggi l'articolo
Stile e grafica

CSS3 ed effetti speciali: rotazione, spostamento, scala ed animazione.

Le funzioni di trasformazione dei CSS3, ovvero come manipolare, ruotare, spostare gli oggetti delle pagine HTML.

Leggi l'articolo
Scopri Ueppy

Scopri Ueppy

un network di professionisti specializzati
nel web.

Scopri Ueppy
Contatta Ueppy
Contatta Ueppy VUOI COSTRUIRE UN NUOVO PROGETTO WEB?

Contatta Ueppy

Scrivici