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