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



21 comentarios:

Raul dijo...

Muito obrigado por este excelente tutorial!

Anónimo 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.

Unknown 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>

Unknown dijo...

gracias.

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

Unknown dijo...

muy bueno

Unknown dijo...

Hola me gustaría saber como podría jugar con los tamaños de las figuras triangulo y rombo utilizando un input

MyAstron Js dijo...

hi esta bien de ahuevo

Andrea Pinzon dijo...

buenas, me gustaria usar las figuras de corazon, triangulo y estrella pero en lugar del color rojo me gustaria que tuviera una imagen pero uso el background pero no me sale donde deberia, que podria hacer?

Anónimo dijo...

buenas, como puedo hacer que cambie de diferentes colores?

Publicar un comentario