Cómo dibujar figuras geométricas complejas con CSS [actualizado]

Si necesitas deshacerte de algunas imágenes en tu sitio web, nada mejor que el CSS. Las siguientes figuras utilizan sólo un elemento div y algo de CSS. Los div están vacíos en estos ejemplos, pero pueden rellenarse con texto u otros elementos HTML. Se ha usado como color el valor red, pero puede cambiarse a gusto incluso por gradientes CSS o imágenes de fondo. Lógicamente, el resultado puede diferir un poco de acuerdo al navegador, pero todos los estilos funcionan en la mayoría de los navegadores modernos.


Sólo copia y pega el código adjunto a cada figura:

Lupa






Facebook






Pantalla / YouTube






Cono






Luna






Marcador






Burbuja de diálogo






Círculo






Corazón






Cuadrado






Diamante






Diamante cortado






Estrella de 6 puntas







Estrella de 5 puntas






Explosión de 12 puntas






Explosión de 8 puntas






Flecha curva






Hexágono








Huevo






Infinito






Insignia con cintas







Octágono






Óvalo






Pac-Man






Paralelogramo






Pentágono







Rectángulo






Rombo






Rombo alargado






Space Invader






Trapezoide






Triángulo arriba






Triángulo abajo






Triángulo izquierda






Triángulo derecha






Triángulo arriba izquierda






Triángulo arriba derecha






Triángulo abajo izquierda






Triángulo abajo derecha






Yin Yang



17 comentarios:

Raul dijo...

Muito obrigado por este excelente tutorial!

Alejandro Marulanda dijo...

Me sirvio mucho, gracias.

Anónimo dijo...

Hola y para poder ponerle un hover en el css como seria?

MiniTutoriales

Si lo que necesitas es cambiar el estilo de la figura cuando el cursor se posa sobre ella, simplemente basta con agregar ":hover" al ID del elemento:
#circle:hover {color:#00ff00;}
Y cambiar el contenido de los corchetes por el estilo nuevo.

Si tu idea es colocar un contenido sobre la figura, sólo debes añadirlo dentro del DIV correspondiente. Por ejemplo:
<div id="talkbubble">Contenido</div>

Anónimo dijo...

Como podría hacer para que el div tenga la forma de cualquier figura y adentro tenga una imagen.

MiniTutoriales

Depende de la figura. En un círculo, por ejemplo, basta con poner como fondo del div la imagen deseada:

#circle {background:url("/imagen.png");}

En otros casos esto no es posible porque los divs utilizan la propiedad border para formar las figuras. Conviene utilizar directamente una imagen con la forma requerida.

Marco Aurelio Ramirez dijo...

amigo me ayudarias a dibujar las figuras geometricas seno, cosena y tangente en html5?

MiniTutoriales

No creo que sea posible lograrlo con puro CSS. Puede intentarse algo así:

<style>
.seno {
text-align: center;
}
.seno_span {
display: inline-block;
margin:0;
padding:0;
height: 20px;
width: 40px;
border: 1px solid black;
}
.seno_span_1 {
border-bottom: none;
border-radius: 20px 20px 0 0;
transform: translate(-20px, 0) scale(2,1);
}
.seno_span_2 {
border-top: none;
border-radius: 0 0 20px 20px;
transform: translate(20px, 20px) scale(2,1);
}
.seno_span_1_2 {
transform: translate(0, 20px) scale(1,2);
}
.seno_span_2_2 {
transform: translate(0, 60px) scale(1,2);
}
</style>

<div class="seno">
<span class="seno_span seno_span_1 seno_span_1_2"></span><span class="seno_span seno_span_2 seno_span_2_2"></span>
</div>

Pero el resultado está lejos de ser una sinusoide real.


Para un efecto más preciso, es necesario usar Canvas y JavaScript. Por ejemplo:

<canvas id="canvas" width="500" height="50"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "rgb(0,0,0)";
for (var i = 0; i <= 500; i++) {
var x = i * 5;
var y = Math.sin(5 * x + 1);
ctx.lineTo(0.5 + x, 25 - y * 24);
}
ctx.stroke();
</script>


O bien recurrir a SVG, que es lo más lógico, pero complejo.

Personalmente, usaría una imagen.

Unknown dijo...

como hago para que el texto no se deforme.hice un paralelogramo y quiero hacer dos columnas o texto pero que esten derechos.el texto tomo la forma de la caja.gracias

MiniTutoriales

Deberías añadir otra caja inmediatamente después y posicionarla sobre la figura:

<div id="interior">Texto</div><style> #interior {position: relative; top: -100px; left: 0; text-align: left; width: 150px;
height: 100px; margin: 0 -100px -150px 0;} </style>

R.Dario gonzalez dijo...

gracias.

Julio Picazo dijo...

Muy buenas, muchas gracias por el aporte, e estado tratando de darle la forma de hueso al div pero no lo e conseguido espero me puedas ayudar saludos y gracias de antemano

fbaretto dijo...

pueden ser div irregulares transparentes con contorno de color?

MiniTutoriales

No (a menos que uses divs como bordes). Para algo así de complejo deberías usar SVG o simplemente una imagen.

Orlando Quintana dijo...

Buenas, yo quiero hacer un efecto hover en un menú, cuando pase el ratón por las opciones del menú, que salga la figura debajo de cada opción, en este caso la figura seria un triángulo, como podría hacerlo?

MiniTutoriales

Te conviene utilizar una imagen como background. De otro modo, tendrías que experimentar con algo así:

<div id="menu-item">
<div id="triangle">
</div>
</div>

#menu-item {position: relative;}
#triangle {position: absolute; bottom: 10px; display: none;}
#menu-item:hover #triangle {display: block;}

Rodolfo gomez coronel dijo...

muy bueno

Publicar un comentario