CSS Simple Shapes

Aprenda a criar formas geométricas recorrendo apenas ao fantástico CSS e CSS3.


Antes do W3C (criadores do CSS), fazerem com que fosse possível, a qualquer web designer, criar qualquer forma geométrica com CSS, e CSS3, tinha-se que recorrer a imagens, quando se queria publicar num site ou blogue um objecto desses.

Agora com o novo CSS3 tudo se tornou possível, já não é mais necessário recorrer a imagens, com apenas CSS e CSS3 tudo se tornou mais fácil e a magia aconteceu.

Veja alguns exemplos de formas geométricas que são possíveis fazer com o CSS e CSS3.

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#square {
width: 100px;
height: 100px;
background: blue;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#parallelog-am {
width: 100px;
height: 70px;
background: blue;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#parallelogram2 {
width: 100px;
height: 70px;
background: blue;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#diamond {
width: 80px;
height: 80px;
background: blue;
margin: 3px 0 0 30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#rectangle {
width: 100px;
height: 60px;
background: blue;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#trapez {
height: 0;
width: 100px;
border-bottom: 100px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#trapez2{
height: 0;
width: 100px;
border-top: 100px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#trapez3{
height: 100px;
width: 0;
border-right: 100px solid green;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#trapez4{
height: 100px;
width: 0;
border-left: 100px solid green;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#triangleUp {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#triangleRight {
width: 0;
height: 0;
border-left: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#triangleDown {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#triangleLeft {
width: 0;
height: 0;
border-right: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#half-circleTop{
background: orange;
height: 45px;
width: 90px;
-moz-border-radius:90px 90px 0 0;
-webkit-border-radius:90px 90px 0 0;
border-radius:90px 90px 0 0;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#half-circleRight {
background: orange;
height: 90px;
width: 45px;
-moz-border-radius:0 90px 90px 0;
-webkit-border-radius:0 90px 90px 0;
border-radius:0 90px 90px 0;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#half-circleBottom{
background: orange;
height: 45px;
width: 90px;
-moz-border-radius: 0 0 90px 90px ;
-webkit-border-radius: 0 0 90px 90px;
border-radius:0 0 90px 90px ;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#half-circleLeft {
background: orange;
height: 90px;
width: 45px;
-moz-border-radius:90px 0 0 90px;
-webkit-border-radius:90px 0 0 90px;
border-radius:90px 0 0 90px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#circle {
width: 90px;
height: 90px;
background: yellow;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#ovalHor {
width: 180px;
height: 90px;
background: orange;
-moz-border-radius:90px/ 45px;
-webkit-border-radius:90px/45px;
border-radius:90px/45px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#ovalVert{
width: 90px;
height: 180px;
background: orange;
-moz-border-radius:45px/90px;
-webkit-border-radius:45px/90px;
border-radius:45px/90px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#chartColorful{
width: 0px;
height: 0px;
border-right: 60px solid purple;
border-top: 60px solid yellow;
border-left: 60px solid black;
border-bottom: 60px solid blue;
-moz-border-radius:60px;
-webkit-border-radius:60px;
border-radius: 60px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#quartercircleTop{
width: 90px;
height: 90px;
background:yellow;
-moz-border-radius: 90px 0 0 0;
-webkit-border-radius: 90px 0 0 0;
border-radius: 90px 0 0 0;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#quartercircleRight{
width: 90px;
height: 90px;
background:yellow;
-moz-border-radius: 0 90px 0 0;
-webkit-border-radius: 0 90px 0 0;
border-radius:0 90px 0 0;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#quartercircleBottom{
width: 90px;
height: 90px;
background:yellow;
-moz-border-radius: 0 0 90px 0;
-webkit-border-radius: 0 0 90px 0;
border-radius:0 0 90px 0;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#quartercircleLeft{
width: 90px;
height: 90px;
background:yellow;
-moz-border-radius: 0 0 0 90px;
-webkit-border-radius: 0 0 0 90px;
border-radius:0 0 0 90px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#chartTop{
width: 0px;
height: 0px;
border-right: 60px solid purple;
border-top: 60px solid transparent;
border-left: 60px solid purple;
border-bottom: 60px solid purple;
-moz-border-radius:60px;
-webkit-border-radius:60px;
border-radius:60px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#chartRight{
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid purple;
border-left: 60px solid purple;
border-bottom: 60px solid purple;
-moz-border-radius:60px;
-webkit-border-radius:60px;
border-radius: 60px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#chartBottom{
width: 0px;
height: 0px;
border-right: 60px solid purple;
border-top: 60px solid purple;
border-left: 60px solid purple;
border-bottom: 60px solid transparent;
-moz-border-radius:60px;
-webkit-border-radius:60px;
border-radius: 60px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#chartLeftt{
width: 0px;
height: 0px;
border-right: 60px solid purple;
border-top: 60px solid purple;
border-left: 60px solid transparent;
border-bottom: 60px solid purple;
-moz-border-radius:60px;
-webkit-border-radius:60px;
border-radius:60px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#heart { position: relative }
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 70px;
    top: 0;
    width: 70px;
    height: 115px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin : 100% 100%;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#triangleUpLeft{
width: 0;
height: 0;
border-top: 50px solid red;
border-bottom: 50px solid transparent;
border-left: 50px solid red;
border-right: 50px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#triangleUpRight"{
width: 0;
height: 0;
border-top: 50px solid red;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid red;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#bookmark-ribbon {
width: 0;
height: 100px;
border-left: 50px solid red;
border-right: 50px solid red;
border-bottom: 35px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#twelve-point-star { 
height: 100px; 
width: 100px; 
background: red; 
position: absolute;
}
#twelve-point-star:before {
height: 100px; 
width: 100px; 
background: red; 
content:""; 
position: absolute; 
/* Rotate */ 
-moz-transform: rotate(30deg); 
-webkit-transform: rotate(30deg); 
-ms-transform: rotate(30deg); 
-o-transform: rotate(30deg); 
transform: rotate(30deg); 
} 
#twelve-point-star:after { 
height: 100px; 
width: 100px; 
background: red; 
content:""; 
position: absolute; 
/* Rotate */ 
-moz-transform: rotate(-30deg); 
-webkit-transform: rotate(-30deg); 
-ms-transform: rotate(-30deg); 
-o-transform: rotate(-30deg); 
transform: rotate(-30deg); 
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#six-point-star {
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-bottom: 80px solid red;
}
#six-point-star:after {
   content:"";
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-top: 80px solid red;
   margin: 30px 0 0 -50px;
}

Gerador de Formas em CSS: Aqui