Pubblicato il 01/09/2015
Abbiamo già visto come creare figure geometriche semplici e complesse attraverso i CSS. In questa terza parte vedremo delle forme particolari e sulle quali, in seguito, contiamo di creare degli articoli dettagliati.
Fumetto
codice CSS
.fumetto {
width:150px;
height:100px;
background:orange;
position:relative;
border-radius:12px;
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-ms-transform:rotate(0);
-o-transform:rotate(0);
transform:rotate(0);
}
.fumetto:before {
content:"";
width:0;
height:0;
position:absolute;
right:100%;
top:35px;
border-top:15px solid transparent;
border-right:30px solid orange;
border-bottom:15px solid transparent;
}
codice SCSS
@mixin fumetto($larghezza, $altezza, $raggioBordo, $sfondo, $rotazione) {
width:$larghezza;
height:$altezza;
background:$sfondo;
position:relative;
border-radius:$raggioBordo;
-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;
right:100%;
top:round($altezza*0.35);
border-top:round($altezza*0.15) solid transparent;
border-right:round($altezza*0.3) solid $sfondo;
border-bottom:round($altezza*0.15) solid transparent;
}
}
.fumetto {
@include fumetto(150px, 100px, 12px, orange, 0deg);
}
blocco HTML
Uovo
codice CSS
.uovo {
width:120px;
height:180px;
background-color:orange;
border-radius:60px 60px 60px 60px / 120px 120px 60px 60px;
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-ms-transform:rotate(0);
-o-transform:rotate(0);
transform:rotate(0);
}
codice SCSS
@mixin uovo($larghezza, $sfondo, $rotazione) {
width:$larghezza;
height:round($larghezza*1.5);
background-color:$sfondo;
border-radius:#{round($larghezza*0.5)} #{round($larghezza*0.5)} #{round($larghezza*0.5)} #{round($larghezza*0.5)} / #{$larghezza} #{$larghezza} #{$larghezza*0.5} #{$larghezza*0.5};
-moz-transform:rotate($rotazione);
-webkit-transform:rotate($rotazione);
-ms-transform:rotate($rotazione);
-o-transform:rotate($rotazione);
transform:rotate($rotazione);
}
.uovo {
@include uovo(120px, orange, 0deg);
}
blocco HTML
Cuore
codice CSS
.cuore {
position:relative;
width:120px;
height:96px;
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-ms-transform:rotate(0);
-o-transform:rotate(0);
transform:rotate(0);
}
.cuore:before {
content:"";
width:60px;
height:96px;
position:absolute;
top:0;
left:60px;
background:orange;
border-radius:60px 60px 0 0;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
-moz-transform-origin:0 100%;
-webkit-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-o-transform-origin:0 100%;
transform-origin:0 100%;
}
.cuore:after {
content:"";
width:60px;
height:96px;
position:absolute;
left:0;
top:0;
background:orange;
border-radius:60px 60px 0 0;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
}
codice SCSS
@mixin cuore($larghezza, $sfondo, $rotazione) {
position:relative;
width:$larghezza;
height:round($larghezza*0.8);
-moz-transform:rotate($rotazione);
-webkit-transform:rotate($rotazione);
-ms-transform:rotate($rotazione);
-o-transform:rotate($rotazione);
transform:rotate($rotazione);
&:before{
content:"";
width:round($larghezza/2);
height:round($larghezza*0.8);
position:absolute;
top:0;
left:round($larghezza/2);
background:$sfondo;
border-radius:round($larghezza/2) round($larghezza/2) 0 0;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
-moz-transform-origin:0 100%;
-webkit-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-o-transform-origin:0 100%;
transform-origin:0 100%;
}
&:after {
content:"";
width:round($larghezza/2);
height:round($larghezza*0.8);
position:absolute;
left:0;
top:0;
background:$sfondo;
border-radius:round($larghezza/2) round($larghezza/2) 0 0;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin :100% 100%;
}
}
.cuore {
@include cuore(120px, orange, 0deg);
}
blocco HTML
Infinito
codice CSS
.infinito {
position:relative;
width:212px;
height:100px;
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-ms-transform:rotate(0);
-o-transform:rotate(0);
transform:rotate(0);
}
.infinito:before {
content:"";
width:60px;
height:60px;
position:absolute;
top:0;
left:0;
border:20px solid orange;
border-radius:50px 50px 0 50px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.infinito:after {
content:"";
width:60px;
height:60px;
position:absolute;
top:0;
right:0;
border:20px solid orange;
border-radius:50px 50px 50px 0;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
codice SCSS
@mixin infinito($altezza, $sfondo, $rotazione) {
position:relative;
width:round($altezza*2.12);
height:$altezza;
-moz-transform:rotate($rotazione);
-webkit-transform:rotate($rotazione);
-ms-transform:rotate($rotazione);
-o-transform:rotate($rotazione);
transform:rotate($rotazione);
&:before {
content:"";
width:round($altezza*0.6);
height:round($altezza*0.6);
position:absolute;
top:0;
left:0;
border:round($altezza*0.2) solid $sfondo;
border-radius:round($altezza*0.5) round($altezza*0.5) 0 round($altezza*0.5);
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
&:after {
content:"";
width:round($altezza*0.6);
height:round($altezza*0.6);
position:absolute;
top:0;
right:0;
border:round($altezza*0.2) solid $sfondo;
border-radius:round($altezza*0.5) round($altezza*0.5) round($altezza*0.5) 0;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
}
.infinito {
@include infinito(100px, orange, 0deg);
}
blocco HTML
Diamante
codice CSS
.diamante {
width:50px;
height:0;
position:relative;
margin:50px;
border-left:25px transparent solid;
border-right:25px transparent solid;
border-bottom:25px orange solid;
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-ms-transform:rotate(0);
-o-transform:rotate(0);
transform:rotate(0);
}
.diamante:after {
content:"";
width:0;
height:0;
position:absolute;
top:25px;
left:-25px;
border-top:75px orange solid;
border-left:50px transparent solid;
border-right:50px transparent solid;
}
codice SCSS
@mixin diamante($larghezza, $sfondo, $rotazione) {
width:$larghezza;
height:0;
position:relative;
margin:$larghezza;
border-left:round($larghezza/2) solid transparent;
border-right:round($larghezza/2) solid transparent;
border-bottom:round($larghezza/2) 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/2);
left:round($larghezza/-2);
border-top:round($larghezza*1.5) solid $sfondo;
border-left:$larghezza solid transparent;
border-right:$larghezza solid transparent;
}
}
.diamante {
@include diamante(50px, orange, 0deg);
}
blocco HTML
Lente
codice CSS
.lente {
position:relative;
display:inline-block;
width:80px;
height:80px;
border:20px solid orange;
border-radius:70px;
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-ms-transform:rotate(0);
-o-transform:rotate(0);
transform:rotate(0);
}
.lente:before {
content:"";
width:70px;
height:20px;
display:inline-block;
position:absolute;
right:-50px;
bottom:-20px;
border-width:0;
background:orange;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
codice SCSS
@mixin lente($larghezza, $sfondo, $rotazione) {
position:relative;
display:inline-block;
width:$larghezza;
height:$larghezza;
border:round($larghezza/4) solid $sfondo;
border-radius:round($larghezza/8*7);
-moz-transform:rotate($rotazione);
-webkit-transform:rotate($rotazione);
-ms-transform:rotate($rotazione);
-o-transform:rotate($rotazione);
transform:rotate($rotazione);
&:before {
content:"";
width:round($larghezza/8*7);
height:round($larghezza/4);
display:inline-block;
position:absolute;
right:round($larghezza/8*-5);
bottom:round($larghezza/-4);
border-width:0;
background:orange;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
}
.lente {
@include lente(80px, orange, 0deg);
}
blocco HTML
Icona Facebook
codice CSS
.iconaFacebook {
width:100px;
height:110px;
position:relative;
border-top:15px solid orange;
border-left:15px solid orange;
border-right:15px solid orange;
background:orange;
overflow:hidden;
border-radius:5px;
}
.iconaFacebook:before {
content:"";
width:40px;
height:90px;
position:absolute;
bottom:-30px;
right:-37px;
background:orange;
border:20px solid #fff;
border-radius:25px;
}
.iconaFacebook:after {
content:"";
width:55px;
height:20px;
position:absolute;
top:50px;
right:5px;
background:#fff;
}
codice SCSS
@mixin iconaFacebook($larghezza, $sfondo, $sfondoCarattere) {
width:$larghezza;
height:round($larghezza*1.1);
position:relative;
border-top:round($larghezza*0.15) solid $sfondo;
border-left:round($larghezza*0.15) solid $sfondo;
border-right:round($larghezza*0.15) solid $sfondo;
background:$sfondo;
overflow:hidden;
border-radius:round($larghezza/20);
-moz-transform:rotate($rotazione);
-webkit-transform:rotate($rotazione);
-ms-transform:rotate($rotazione);
-o-transform:rotate($rotazione);
transform:rotate($rotazione);
&:before {
content:"";
width:round($larghezza*2/5);
height:round($larghezza*0.9);
position:absolute;
bottom:round($larghezza*-0.3);
right:round($larghezza*-0.37);
background:$sfondo;
border:20px solid $sfondoCarattere;
border-radius:round($larghezza/4);
}
&:after {
content:"";
width:round($larghezza*0.55);
height:round($larghezza/5);
position:absolute;
top:round($larghezza/2);
right:round($larghezza/20);
background:$sfondoCarattere;
}
}
.iconaFacebook {
@include iconaFacebook(100px, orange, white);
}
blocco HTML
Yin/Yang
codice CSS
.yinYang {
width:80px;
height:40px;
border-width:2px 2px 40px 2px;
border-style:solid;
border-color:orange;
border-radius:100%;
background:#fff;
position:relative;
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-ms-transform:rotate(0);
-o-transform:rotate(0);
transform:rotate(0);
}
.yinYang:before {
content:"";
width:10px;
height:10px;
position:absolute;
top:50%;
left:0;
border:15px solid orange;
border-radius:100%;
background:#fff;
}
.yinYang:after {
content:"";
width:10px;
height:10px;
position:absolute;
top:50%;
left:50%;
background:orange;
border:15px solid #fff;
border-radius:100%;
}
codice SCSS
@mixin yinYang($larghezza, $sfondo, $sfondoCarattere, $rotazione) {
width:$larghezza;
height:round($larghezza/2);
border-width:round($larghezza/40) round($larghezza/40) round($larghezza/2) round($larghezza/40);
border-style:solid;
border-color:$sfondo;
border-radius:100%;
background:$sfondoCarattere;
position:relative;
-moz-transform:rotate($rotazione);
-webkit-transform:rotate($rotazione);
-ms-transform:rotate($rotazione);
-o-transform:rotate($rotazione);
transform:rotate($rotazione);
&:before {
content:"";
width:round($larghezza/8);
height:round($larghezza/8);
position:absolute;
top:50%;
left:0;
border:round($larghezza/8*1.5) solid $sfondo;
border-radius:100%;
background:$sfondoCarattere;
}
&:after {
content:"";
width:round($larghezza/8);
height:round($larghezza/8);
position:absolute;
top:50%;
left:50%;
background:$sfondo;
border:round($larghezza/8*1.5) solid $sfondoCarattere;
border-radius:100%;
}
}
.yinYang {
@include yinYang(80px, orange, white, 0deg);
}
blocco HTML
Sullo stesso argomento: Figure CSS semplici Figure CSS avanzate