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:
Muito obrigado por este excelente tutorial!
Me sirvio mucho, gracias.
Hola y para poder ponerle un hover en el css como seria?
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>
Como podría hacer para que el div tenga la forma de cualquier figura y adentro tenga una imagen.
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.
amigo me ayudarias a dibujar las figuras geometricas seno, cosena y tangente en html5?
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.
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
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>
gracias.
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
pueden ser div irregulares transparentes con contorno de color?
No (a menos que uses divs como bordes). Para algo así de complejo deberías usar SVG o simplemente una imagen.
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?
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;}
muy bueno
Hola me gustaría saber como podría jugar con los tamaños de las figuras triangulo y rombo utilizando un input
hi esta bien de ahuevo
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?
buenas, como puedo hacer que cambie de diferentes colores?
Publicar un comentario