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