Formas básicas con CSS 3g4j38 triángulos, círculos, trapecios, rectángulos, cuadrados

Herramientas SEO Tamaño del resultado: 668 x 574

<!-- BORRAR TODA ESTA LINEA PARA VER EL EJEMPLO

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Formas básicas con CSS: triángulos, círculos, trapecios, rectángulos, cuadrados</title>
</head>
<body>

<style>body{padding:40px}
 .cuadrado {
     width: 100px; 
     height: 100px; 
     background: #428bca;margin-bottom:30px;
}
.cuadrado-2 {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555;margin-bottom:30px;
}
.cuadrado-3 {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555;
     background: #428bca;margin-bottom:30px;
}
.rectangulo {
     width: 250px; 
     height: 100px; 
     border: 3px solid #555;
     background: #428bca;margin-bottom:30px;
}
.rombo {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555; 
     background: #428bca;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);margin-bottom:30px;
}
.rombo-2 {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555; 
     background: #428bca;
     -webkit-transform: rotate(45deg) skew(15deg, 15deg);
     -moz-transform: rotate(45deg) skew(15deg, 15deg);
     -ms-transform: rotate(45deg) skew(15deg, 15deg);
     -o-transform: rotate(45deg) skew(15deg, 15deg);
     transform: rotate(45deg) skew(15deg, 15deg);margin-bottom:30px;
}
.paralelogramo {
     width: 150px; 
     height: 100px; 
     border: 3px solid #555; 
     background: #428bca;
     -webkit-transform: skew(20deg);
     -moz-transform: skew(20deg);
     -ms-transform: skew(20deg);
     -o-transform: skew(20deg);
     transform: skew(20deg);margin-bottom:30px;
}
.trapecio {
    width: 250px;
    height: 0px;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
    border-bottom: 100px solid #428bca;margin-bottom:30px;
}
.trapecio-top {
    width: 250px;
    height: 0px;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
    border-top: 100px solid #428bca;margin-bottom:30px;
}
.triangulo {
     width: 0; 
     height: 0; 
     border-left: 100px solid #f0ad4e;
     border-top: 50px solid transparent;
     border-bottom: 50px solid transparent; margin-bottom:30px;
}
.triangulo-2 {
    width: 0;
    height: 0;
    border-top: 100px solid #f0ad4e;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;margin-bottom:30px;
}
.triangulo-tricolor {
     width: 0; 
     height: 0; 
     border-left: 100px solid #428bca;
     border-top: 50px solid #f0ad4e;
     border-bottom: 50px solid #d9534f; margin-bottom:30px;
}
.triangulo-equilatero-bottom-left {
     width: 0;
     height: 0;
     border-right: 50px solid transparent;
     border-top: 50px solid transparent;
     border-left: 50px solid #f0ad4e;
     border-bottom: 50px solid #f0ad4e;margin-bottom:30px;
}
.triangulo-equilatero-bottom {
     width: 0;
     height: 0;
     border-right: 100px solid transparent;
     border-top: 100px solid transparent;
     border-left: 100px solid transparent;
     border-bottom: 100px solid #f0ad4e;margin-bottom:30px;
}
.circulo {
     width: 100px;
     height: 100px;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background: #5cb85c;margin-bottom:30px;
}
.oval {
     width: 250px;
     height: 100px;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background: #5cb85c;margin-bottom:30px;
}
.oval-half-red {
     width: 250px;
     height: 100px;
     -moz-border-radius: 0 50% / 0 100%;
     -webkit-border-radius: 0 50% / 0 100%;
     border-radius: 0 50% / 0 100%;
     background: #5cb85c;
     border: 3px solid #555;margin-bottom:30px;
}
.huevo {
    width: 126px;
    height: 180px;
    background-color: #5cb85c;
    -moz-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    -webkit-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;margin-bottom:30px;
}
.cuarto-circulo {
     width: 100px; 
     height: 100px; 
     border: 2px solid #555; 
     background: #5cb85c;
     -moz-border-radius: 0 100% 0 0;
     -webkit-border-radius: 0 100% 0 0;
     border-radius: 0 100% 0 0;margin-bottom:30px;
}
.semi-circulo {
     width: 100px; 
     height: 50px; 
     border: 2px solid #555; 
     background: #5cb85c;
     -moz-border-radius: 100px 100px 0 0;
     -webkit-border-radius: 100px 100px 0 0;
     border-radius: 100px 100px 0 0;margin-bottom:30px;
}
.pac-man {margin-bottom:30px; width:0; height:0; border-right: 50px solid transparent; border-top: 50px solid #5cb85c; border-left: 50px solid #5cb85c; border-bottom: 50px solid #5cb85c; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; }
.color-chart {
     width:0;
     height:0;
     border-right: 50px solid #d9534f;
     border-top: 50px solid #428bca;
     border-left: 50px solid #f0ad4e;
     border-bottom: 50px solid #5cb85c;
     -moz-border-radius: 100%;
     -webkit-border-radius: 100%;
     border-radius: 100%;margin-bottom:30px;
}
.cono {
    width: 0px;
    height: 0px;
    border-right: 70px solid transparent;
    border-left: 70px solid transparent;
    border-top: 100px solid #5cb85c;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;margin-bottom:30px;
}
.ribbon {
    width: 0px;
    height: 120px;
    border-left: 50px solid #d9534f;
    border-right: 50px solid #d9534f;
    border-bottom: 35px solid transparent;margin-bottom:30px;
}
.luna {
    width: 100px;
    height: 100px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-box-shadow: 30px 10px 0 #d9534f;
    -webkit-box-shadow: 30px 10px 0 #d9534f;
    box-shadow: 30px 10px 0 #d9534f;margin-bottom:30px;
}
</style>
<div class="cuadrado"></div><br>
<div class="cuadrado-2"></div><br>
<div class="cuadrado-3"></div><br>
<div class="rectangulo "></div><br><br>
<div class="rombo"></div><br><br><br><br>
<div class="rombo-2"></div><br><br><br>
<div class="paralelogramo "></div><br>
<div class="trapecio"></div><br>
<div class="trapecio-top"></div><br>
<div class="triangulo"></div><br>
<div class="triangulo-2"></div><br>
<div class="triangulo-tricolor"></div><br>
<div class="triangulo-equilatero-bottom-left"></div><br>
<div class="triangulo-equilatero-bottom"></div><br>
<div class="circulo "></div><br>
<div class="oval"></div><br>
<div class="oval-half-red"></div><br>
<div class="huevo"></div><br>
<div class="cuarto-circulo"></div><br>
<div class="semi-circulo"></div><br>
<div class="pac-man "></div><br>
<div class="color-chart"></div><br>
<div class="cono"></div><br>
<div class="ribbon"></div><br>
<div class="luna"></div><br>
<div class="cono"></div><br>
<div class="cono"></div><br>

</body>
</html> -->