Códigos Fuente de CSS

Ejemplo de como dibujar un diamante en forma de escudo con CSS.
La manera de dibujarlo, es crear dos triángulos, uno mas pequeño que el otro para simular la forma.

Ejemplo de como dibujar un diamante en forma alargada con CSS.
La manera de dibujarlo, es crear dos triángulos, y uno de ellos (:after) invertido

Ejemplo de como dibujar un diamante con CSS.

Aquí se muestran dos versiones de como hacer el diamante:

Versión 1
Se utiliza un triangulo o pirámide y en el :after se crea otro triangulo o diamante invertido

Versión 2
Se utiliza un cuadrado y se rota 45º

Ejemplo de como dibujar un octágono con CSS.
La manera que se utiliza, es crear un cuadrado, y luego con :before y :after se crean dos formas trapezoidales.

Ejemplo de como dibujar una estrella de seis puntas con CSS.
La manera que se utiliza, es crear dos pirámides o triangulos inversas con la ayuda de :after y sobreponerlas una encima de la otra.

Ejemplo de como dibujar una estrella de cinco puntas con CSS.
La manera que se utiliza, es crear una pirámide o triangulo rotada 35 grados a la derecha, en :after se crea otro triangulo rotado 35 grados a la izquierda, y en :before se crea un pequeña pirámide en la parte superior.

Ejemplo de como dibujar un pentágono con CSS.
La manera que se utiliza, es crear una forma trapezoidal, y luego con :before crea una pirámide o triangulo encima

Ejemplo de como dibujar un hexagono con CSS.

Aquí se muestran dos versiones de como hacer el hexagono:

Versión 1
Se utiliza un ractangulo para el medio, en :before y :after se crea una pirámide o triangulo

Versión 2
Se utilizan dos formas trapezoidales opuestas, la segunda forma esta en el :after

Ejemplo de como dibujar una forma trapezoidal con CSS

Ejemplo de como dibujar un triangulo con CSS