En este tutoriales en linea he recopilado los snippets CSS para crear formas básicas como cuadrados, círculos y triángulos. Derivadas de estas se pueden construir fácilmente otras formas tales como rombos, trapecios y otros paralelogramos. Espero que te sean útiles.

Cuadrados y rectángulos 535o6g

Los cuadrados y los rectángulos son las formas geométricas más fáciles de dibujar con CSS. Basta definir un bloque con la altura y anchura del cuadrado o rectángulo y darle un color de fondo o definirle un borde. Por ejemplo:

.cuadrado {
     width: 100px; 
     height: 100px; 
     background: #428bca;
}

Si en lugar de un color de fondo definimos un borde (esto se puede aplicar al resto de formas):

.cuadrado-2 {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555;
}

Y se puede combinar border y background:

.cuadrado-3 {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555;
     background: #428bca;
}

Y tan fácil como cambiar las propiedades CSS width y height para obtener un rectángulo:

.rectangulo {
     width: 250px; 
     height: 100px; 
     border: 3px solid #555;
     background: #428bca;
}

El rombo 566u2p

Si giramos el cuadrado obtendremos una forma de rombo. El giro se consigue gracias a la propiedad rotate:

.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);
}

La forma anterior no es realmente un rombo, es tan sólo un cuadrado girado. El verdadero rombo se consigue combinando la función rotate y skew en la propiedad transform:

.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);
}

Paralelogramos 4qt6v

Con la propiedad transform podemos conseguir otros paralelogramos. Por ejemplo:

.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);
}

Trapecios 6e279

.trapecio {
    width: 250px;
    height: 0px;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
    border-bottom: 100px solid #428bca;
}

.trapecio-top {
    width: 250px;
    height: 0px;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
    border-top: 100px solid #428bca;
}

Triángulos 4xb2r

En CSS podemos definir cada uno de los cuatro bordes de un bloque de forma diferente. Se puede aprovechar esta característica para dibujar formas derivadas del cuadrado, como el triángulo: Por ejemplo, si definimos un borde de una determinada anchura y a los bordes adyacentes le damos la mitad de anchura y un color diferente, obtenemos una forma triangular si al propio contenedor le damos una anchura y altura de cero. Por ejemplo:

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

Jugando con cada uno de los bordes podemos «girar» el triángulo (este mismo concepto se puede utilizar en el resto de formas basadas en bordes que veremos a continuación):

.triangulo-2 {
    width: 0;
    height: 0;
    border-top: 100px solid #f0ad4e;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

Y también podemos combinar colores:

.triangulo-tricolor {
     width: 0; 
     height: 0; 
     border-left: 100px solid #428bca;
     border-top: 50px solid #f0ad4e;
     border-bottom: 50px solid #d9534f; 
}

Triángulo equilátero 31o4l

.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;
}

.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;
}

Círculos y formas redondeadas q5g1b

Del cuadrado también podemos obtener el círculo y formas redondeadas si aplicamos la propiedad border-radius. Un border-radius igual del 50% en los cuatro bordes del cuadrado dará el círculo:

.circulo {
     width: 100px;
     height: 100px;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background: #5cb85c;
}

Oval k1y69

Y si podemos tener un círculo, también podemos tener una forma ovalada:

.oval {
     width: 250px;
     height: 100px;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background: #5cb85c;
}

Combinando distintos valores de border-radius para cada borde obtendremos formas redondeadas diferentes:

.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;
}

Huevo 2g5237

.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%;
}

1/4 de círculo

.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;
}

Semicírculo 2w6ee

.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;
}

.semi-circulo-2 {
     width: 50px; 
     height: 100px; 
     border: 2px solid #555; 
     background: #5cb85c;
     -moz-border-radius: 0 100px 100px 0;
     -webkit-border-radius: 0 100px 100px 0;
     border-radius: 0 100px 100px 0;
}

Pac-Man (ComeCocos) 143xj

.pac-man { 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%; }

Démosle color:

.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%;
}

Y con el negativo de pac-man y unos ligeros ajustes en el grosor de los bordes tendremos un cono:

.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%;
}

Más formas 1q4765

Ribbon 332a3d

.ribbon {
    width: 0px;
    height: 120px;
    border-left: 50px solid #d9534f;
    border-right: 50px solid #d9534f;
    border-bottom: 35px solid transparent;
}

Luna 6v4w2w

.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;
}

Ver demostración de las formas. triángulos, círculos, trapecios, rectángulos, cuadrados y demás...

Todavía más 2t5q19

Las posibilidades para dibujar formas con CSS son prácticamente ilimitadas, mucho más si introducimos los pseudoelementos ver mas sobre formas...

Formas básicas con CSS: triángulos, círculos, trapecios, rectángulos, cuadrados 456r5d