Massimiliano Carnevale

Massimiliano Carnevale

Co-Founder
Stile e grafica

Figure CSS avanzate: stelle, mezzaluna, cono e pacman

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

Pubblicato il 26/08/2015

Abbiamo già visto come creare figure geometriche semplici attraverso i CSS. In questo articolo vedremo delle forme più o meno complesse realizzabili con la potenza di tale linguaggio

 

Stella a 5 punte

codice CSS
.stella5punte {
   position:relative;
   display:block;
   width:0;
   height:0;
   border-right:92px solid transparent;
   border-bottom:65px solid orange;
   border-left:92px solid transparent;
   -moz-transform:rotate(180deg);
   -webkit-transform:rotate(180deg);
   -ms-transform:rotate(180deg);
   -o-transform:rotate(180deg);
   transform:rotate(180deg);
}
	.stella5punte:after {
		content:"";
		width:0;
		height:0;
		display:block;
		position:absolute;
		top:-33px;
		left:-50px;
		border-bottom:65px solid orange;
		border-left:21px solid transparent;
		border-right:92px solid transparent;
		-moz-transform:rotate(-72deg);
		-webkit-transform:rotate(-72deg);
		-ms-transform:rotate(-72deg);
		-o-transform:rotate(-72deg);
		transform:rotate(-72deg);  
	}
	.stella5punte:before {
		content:"";
		width:0;
		height:0;
		display:block;
		position:absolute;
		top:0;
		right:-92px;
		border-bottom:65px solid orange;
		border-left:92px solid transparent;
		border-right:92px solid transparent;
		-moz-transform:rotate(72deg);
		-webkit-transform:rotate(72deg);
		-ms-transform:rotate(72deg);
		-o-transform:rotate(72deg);
		transform:rotate(72deg);
	}
codice SCSS
@mixin stella5punte($larghezza, $sfondo, $rotazione) {
	position:relative;
	display:block;
	width:0;
	height:0;
	border-right:round($larghezza/2) solid transparent;
	border-bottom:round($larghezza/2.83) solid $sfondo;
	border-left:round($larghezza/2) solid transparent;
	-moz-transform:rotate(180deg+$rotazione);
	-webkit-transform:rotate(180deg+$rotazione);
	-ms-transform:rotate(180deg+$rotazione);
	-o-transform:rotate(180deg+$rotazione);
	transform:rotate(180deg+$rotazione);
	&:after {
		content:"";
		width:0;
		height:0;
		display:block;
		position:absolute;
		top:round($larghezza/-5.57);
		left:round($larghezza/-3.68);
		border-bottom:round($larghezza/2.83) solid $sfondo;
		border-left:round($larghezza/8.762) solid transparent;
		border-right:round($larghezza/2) solid transparent;
		-moz-transform:rotate(-72deg);
		-webkit-transform:rotate(-72deg);
		-ms-transform:rotate(-72deg);
		-o-transform:rotate(-72deg);
		transform:rotate(-72deg);  
	}
	&:before {
		content:"";
		width:0;
		height:0;
		display:block;
		position:absolute;
		top:0;
		right:round($larghezza/-2);
		border-bottom:round($larghezza/2.83) solid $sfondo;
		border-left:round($larghezza/2) solid transparent;
		border-right:round($larghezza/2) solid transparent;
		-moz-transform:rotate(72deg);
		-webkit-transform:rotate(72deg);
		-ms-transform:rotate(72deg);
		-o-transform:rotate(72deg);
		transform:rotate(72deg);
	}
}
.stella5punte {
	@include stella5punte(184px, orange, 0);
}
blocco HTML

 

Stella a 6 punte

codice CSS
.stella6punte {
	width:0;
	height:0; 
	border-left:50px solid transparent;
	border-right:50px solid transparent;
	border-bottom:87px solid orange;
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
	.stella6punte:after {
		content:"";
		width:0;
		height:0; 
		position:absolute;
		top:29px;
		left:-50px;
		border-left:50px solid transparent;
		border-right:50px solid transparent;
		border-bottom:87px solid orange;
		-moz-transform:rotate(180deg);
		-webkit-transform:rotate(180deg);
		-ms-transform:rotate(180deg);
		-o-transform:rotate(180deg);
		transform:rotate(180deg);
	}
codice SCSS
@mixin stella6punte($larghezza, $sfondo, $rotazione) {
	width:0;
	height:0; 
	border-left:round($larghezza/2) solid transparent;
	border-right:round($larghezza/2) solid transparent;
	border-bottom:round($larghezza*0.866) solid $sfondo;
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
	&:after {
		content:"";
		width:0;
		height:0;
		position:absolute;
		top:round($larghezza*0.289);
		left:round($larghezza/-2);
		border-left:round($larghezza/2) solid transparent;
		border-right:round($larghezza/2) solid transparent;
		border-bottom:round($larghezza*0.866) solid $sfondo;
		-moz-transform:rotate(180deg);
		-webkit-transform:rotate(180deg);
		-ms-transform:rotate(180deg);
		-o-transform:rotate(180deg);
		transform:rotate(180deg);
	}
}
.stella6punte {
	@include stella6punte(100px, orange, 0deg);
}
blocco HTML

 

Stella a 8 punte

codice CSS
.stella8punte {
	width:80px;
	height:80px; 
	background:orange;
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
	.stella8punte:after {
		content:"";
		width:80px;
		height:80px;
		background:orange;
		position:absolute;
		top:0;
		left:0;
		-moz-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg);
	}
codice SCSS
@mixin stella8punte($larghezza, $sfondo, $rotazione) {
	width:round($larghezza*0.707);
	height:round($larghezza*0.707);
	background:$sfondo;
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
	&:after {
		content:"";
		width:round($larghezza*0.707);
		height:round($larghezza*0.707);
		background:$sfondo;
		position:absolute;
		top:0;
		left:0;
		-moz-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg);
	}
}
.stella8punte {
	@include stella8punte(100px, orange, 0deg);
}
blocco HTML

 

Stella a 12 punte

codice CSS
.stella12punte {
	width:80px;
	height:80px; 
	background:orange;
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
	.stella12punte:after {
		content:"";
		width:80px;
		height:80px;
		background:orange;
		position:absolute;
		top:0;
		left:0;
		-moz-transform:rotate(30deg);
		-webkit-transform:rotate(30deg);
		-ms-transform:rotate(30deg);
		-o-transform:rotate(30deg);
		transform:rotate(30deg);
	}
	.stella12punte:before {
		content:"";
		width:80px;
		height:80px;
		background:orange;
		position:absolute;
		top:0;
		left:0;
		-moz-transform:rotate(60deg);
		-webkit-transform:rotate(60deg);
		-ms-transform:rotate(60deg);
		-o-transform:rotate(60deg);
		transform:rotate(60deg);
	}
codice SCSS
@mixin stella12punte($larghezza, $sfondo, $rotazione) {
	width:round($larghezza*0.707);
	height:round($larghezza*0.707);
	background:$sfondo;
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
	&:after {
		content:"";
		width:round($larghezza*0.707);
		height:round($larghezza*0.707);
		background:$sfondo;
		position:absolute;
		top:0;
		left:0;
		-moz-transform:rotate(30deg);
		-webkit-transform:rotate(30deg);
		-ms-transform:rotate(30deg);
		-o-transform:rotate(30deg);
		transform:rotate(30deg);
	}
	&:before {
		content:"";
		width:round($larghezza*0.707);
		height:round($larghezza*0.707);
		background:$sfondo;
		position:absolute;
		top:0;
		left:0;
		-moz-transform:rotate(60deg);
		-webkit-transform:rotate(60deg);
		-ms-transform:rotate(60deg);
		-o-transform:rotate(60deg);
		transform:rotate(60deg);
	}
}
.stella12punte {
	@include stella12punte(100px, orange, 0deg);
}
blocco HTML

 

Croce

codice CSS
.croce {
	width:30px;
	height:100px;
	position:relative;
	background:orange;
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
	.croce:after {
		content:"";
		width:100px;
		height:30px;
		position:absolute;
		top:35px;
		left:-35px;
		background:orange;
	}
codice SCSS
@mixin croce($larghezza, $spessore, $sfondo, $rotazione) {
	width:$spessore;
	height:$larghezza;
	position:relative;
	background:$sfondo;
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
	&:after {
		content:"";
		width:$larghezza;
		height:$spessore;
		position:absolute;
		top:round(($larghezza - $spessore)/2);
		left:round(($larghezza - $spessore)/-2);
		background:$sfondo;
	}
}
.croce {
	@include croce(100px, 30px, orange, 0deg);
}
blocco HTML

 

Mezzaluna

codice CSS
.mezzaluna {
	width:100px;
	height:100px;
	border-radius:50px;
	box-shadow:20px 20px 0 0 orange;
	-moz-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(90deg);
}
codice SCSS
@mixin mezzaluna($larghezza, $sfondo, $rotazione, $pienezza) {
	width:$larghezza;
	height:$larghezza;
	border-radius:round($larghezza/2);
	box-shadow:round($larghezza*$pienezza) round($larghezza*$pienezza) 0 0 $sfondo;
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
}
.mezzaluna {
	@include mezzaluna(100px, orange, 90deg, 0.2);
}
blocco HTML

 

Pacman

codice CSS
.pacman {
	width:0;
	height:0;
	border-radius:50px;
	border-width:50px;
	border-style:solid;
	border-color:orange transparent orange orange;  
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
codice SCSS
@mixin pacman($larghezza, $sfondo, $rotazione) {
	width:0;
	height:0;
	border-radius:round($larghezza/2);
	border-width:round($larghezza/2);
	border-style:solid;
	border-color:$sfondo transparent $sfondo $sfondo;  
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
}
.pacman {
	@include pacman(100px, orange, 0deg);
}
blocco HTML

 

Cono

codice CSS
.cono {
	width:0;
	height:0;
	border-radius:50px;
	border-width:50px 25px 25px 25px;
	border-style:solid;
	border-color:orange transparent transparent transparent;  
	-moz-transform:rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
codice SCSS
@mixin cono($larghezza, $sfondo, $rotazione, $ampiezza) {
	width:0;
	height:0;
	border-radius:$larghezza;
	border-width:$larghezza round($larghezza*$ampiezza) round($larghezza*$ampiezza) round($larghezza*$ampiezza);
	border-style:solid;
	border-color:$sfondo transparent transparent transparent;  
	-moz-transform:rotate($rotazione);
	-webkit-transform:rotate($rotazione);
	-ms-transform:rotate($rotazione);
	-o-transform:rotate($rotazione);
	transform:rotate($rotazione);
}
.cono {
	@include cono(50px, orange, 0deg, 0.5);
}
blocco HTML

Sullo stesso argomento: Figure CSS semplici Figure CSS speciali

CONDIVIDI SUI SOCIAL
Ueppy Blog

Leggi articoli correlati

Stile e grafica

Sintassi e prime basi SASS: parte prima

Primi esempi pratici di codice per SASS, il pre-processore di CSS - parte prima

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

Introduzione a SASS e LESS: come utilizzare al meglio i CSS

Variabili, operazioni, calcoli con i CSS? Se hai queste (e altre esigenze), hai la soluzione a portata di click!

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