Formato de Desenhos com Css3 Parte – 2

Formato de Desenhos com Css3 Parte – 2

Neste artigo veja como podemos criar alguns formatos de desenhos com css3.

Vamos Adicionar o Html:

<div class="alinha-center">                
    <div id="lua"></div>
</div>

<div class="alinha-center">                
    <div id="diamante"></div>
</div>

<div class="alinha-center">                
    <div id="pizza"></div>
</div>

<div class="alinha-center">                
    <div id="diamond-narrow"></div>
</div>

<div class="alinha-center">                
    <div id="diamante2"></div>
</div>

<div class="alinha-center">                
    <div id="triangulo-up"></div>
</div>

<div class="alinha-center">                
    <div id="triangulo-down"></div>
</div>

<div class="alinha-center">                
    <div id="triangulo-left"></div>
</div>                

<div class="alinha-center">                
    <div id="triangulo-right"></div>
</div>

<div class="alinha-center">                
    <div id="triangulo-topleft"></div>
</div>

<div class="alinha-center">                
    <div id="triangulo-topright"></div>
</div>

<div class="alinha-center">                
    <div id="triangulo-bottomleft"></div>
</div>

<div class="alinha-center">                
    <div id="triangulo-bottomright"></div>
</div>

Vamos adicionar o css:

.alinha-center { width:220px; height:120px; margin:auto; margin-bottom:50px; text-align:center;  }

#lua {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 #f0cb9a;
}

#diamante {
    border-style: solid;
    border-color: transparent transparent #00dbff transparent;
    border-width: 0 25px 25px 25px;
    height: 0;
    width: 100px;
    position: relative;
    margin: 20px 0 50px 0;
}
#diamante:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #00d0f2 transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

#pizza {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid #ffb506;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

#diamond-narrow {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 70px solid #ca2a2a;
  position: relative;
  top: -50px;
}
#diamond-narrow:after {
  content: '';
  position: absolute;
  left: -50px; top: 70px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid #bb0a0a;
}

#diamante2 {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: #ffbcbc;
  position: relative;
  top: -50px;
}
#diamante2:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: #ffbcbc;
}


#triangulo-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #c700ff;
}

#triangulo-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #c16b6b;
}

#triangulo-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid #00c3ff;
  border-bottom: 50px solid transparent;
}

#triangulo-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid #e80db1;
  border-bottom: 50px solid transparent;
}

#triangulo-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid #3e2691;
  border-right: 100px solid transparent;
}

#triangulo-topright {
  width: 0;
  height: 0;
  border-top: 100px solid #df6060;
  border-left: 100px solid transparent;

}

#triangulo-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 100px solid #ff8f00;
  border-right: 100px solid transparent;
}

#triangulo-bottomright {
  width: 0;
  height: 0;
  border-bottom: 100px solid #4c4c4c;
  border-left: 100px solid transparent;
}

Veja o Resultado!

Baixar Código Veja Funcionando