Foros del Web » Creando para Internet » CSS »

div con formas geométricas

Estas en el tema de div con formas geométricas en el foro de CSS en Foros del Web. hola a todos. bueno, mi duda es sobre los div (lo pone el título, ¿no?). todo el mundo sabe que, por defecto, los div tienen ...
  #1 (permalink)  
Antiguo 22/09/2011, 10:22
Avatar de RafaRG  
Fecha de Ingreso: julio-2011
Ubicación: Córdoba, España
Mensajes: 124
Antigüedad: 8 años, 6 meses
Puntos: 13
Pregunta div con formas geométricas

hola a todos. bueno, mi duda es sobre los div (lo pone el título, ¿no?).
todo el mundo sabe que, por defecto, los div tienen forma cuadrada o rectangular, según las medidas que le demos. sin embargo, es posible alterar esa forma, por ejemplo haciendo que el div sea circular aplicando el border-radius.
la pregunta es: ¿es posible hacer que un div adopte otras formas, por ejemplo un triángulo, aplicando css? en caso de que con css no se pueda, ¿hay alguna otra manera?
muchas gracias
  #2 (permalink)  
Antiguo 22/09/2011, 10:48
 
Fecha de Ingreso: octubre-2004
Mensajes: 5
Antigüedad: 15 años, 3 meses
Puntos: 1
Respuesta: div con formas geométricas

para que quieres divs redondos o triangulares?
  #3 (permalink)  
Antiguo 22/09/2011, 10:52
Avatar de RafaRG  
Fecha de Ingreso: julio-2011
Ubicación: Córdoba, España
Mensajes: 124
Antigüedad: 8 años, 6 meses
Puntos: 13
Respuesta: div con formas geométricas

bueno, yo creo que esa información es irrelevante, pero si puedes ayudarme, te lo comunicaré =/
los quiero para darle un mejor aspecto a una web y que no sea toda de cuadrados y rectángulos. tan simple como eso XD
  #4 (permalink)  
Antiguo 22/09/2011, 11:11
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 10 años, 7 meses
Puntos: 269
Respuesta: div con formas geométricas

aca podes ver como hacer triangulos: http://jonrohan.me/guide/css/creating-triangles-in-css/
Espero te sea útil.
  #5 (permalink)  
Antiguo 22/09/2011, 11:37
Avatar de RafaRG  
Fecha de Ingreso: julio-2011
Ubicación: Córdoba, España
Mensajes: 124
Antigüedad: 8 años, 6 meses
Puntos: 13
Respuesta: div con formas geométricas

ya veo. muy ingenioso el truco, usando los bordes. muchas gracias, aunque no solo me gustaría hacer triángulos. me gustaría hacer polígonos irregulares pero sin tener que acoplar varios div distintos.
por ejemplo, en esta foto hay dos botones. al hacer click en ellos, se despliega una serie de opciones metidas en unos divs personalizados. pero claro, para hacer eso armé una buena... un ejemplo de ello es que los bordes redondeados hacia dentro los hice poniendo un div cubriendo otro (el resultado es bueno, pero el método de hacerlo no).

en definitiva, yo lo que quisiera hacer es que un solo div tenga esa forma deseada.
  #6 (permalink)  
Antiguo 22/09/2011, 11:47
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 10 años, 7 meses
Puntos: 269
Respuesta: div con formas geométricas

Un polígono que yo sepa es imposible de hacer con css (alternativa: mapas de imagen html). Para trabajar con formas complejas (nodo/vector) ya lo ideal sería usar canvas (solo soportado por navegadores modernos). Sino siempre caemos en que tenemos cajas como unidad básica de trabajo.
  #7 (permalink)  
Antiguo 22/09/2011, 12:03
Avatar de RafaRG  
Fecha de Ingreso: julio-2011
Ubicación: Córdoba, España
Mensajes: 124
Antigüedad: 8 años, 6 meses
Puntos: 13
Respuesta: div con formas geométricas

entiendo. bueno, en ese caso, una vez termine con java script y php, empezaré a sumergirme en el canvas, que parece que la cosa promete.
muchas gracias por todo
  #8 (permalink)  
Antiguo 22/09/2011, 12:08
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 10 años, 7 meses
Puntos: 269
Respuesta: div con formas geométricas

Seguro que promete, podes googlear por "adobe edge" o "sencha animator" y verás la importancia que le estan dando. Si sos curioso acá podes ver los experimentos de google con canvas y webgl

Saludos
  #9 (permalink)  
Antiguo 22/09/2011, 12:28
Avatar de RafaRG  
Fecha de Ingreso: julio-2011
Ubicación: Córdoba, España
Mensajes: 124
Antigüedad: 8 años, 6 meses
Puntos: 13
Respuesta: div con formas geométricas

ey, pues me viene de lujo. gracias otra vez :D
  #10 (permalink)  
Antiguo 22/01/2013, 11:39
 
Fecha de Ingreso: enero-2013
Mensajes: 1
Antigüedad: 7 años
Puntos: 0
Respuesta: div con formas geométricas

Hola!
Para conseguir un círculo puedes usar un div cuadrado y darle el mismo border-radius que su lado:

div.circulo { width: 20px; height: 20px; border radius: 20px 20px; }

Para hacer otras formas, puedes probar con la propiedad clip , pero me temo que no te dará los resultados que buscas.

Un saludo!
  #11 (permalink)  
Antiguo 22/01/2013, 12:10
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 11 años, 4 meses
Puntos: 187
Respuesta: div con formas geométricas

Cuando de formas geometricas se trata suelo recurrir a este post:
http://css-tricks.com/examples/ShapesOfCSS/

Para diamantes (o rombos) puedes ver acá:
http://viget.com/inspire/who-says-th...st-for-squares
  #12 (permalink)  
Antiguo 22/01/2013, 13:08
 
Fecha de Ingreso: enero-2013
Mensajes: 5
Antigüedad: 7 años
Puntos: 0
Respuesta: div con formas geométricas

Cita:
Iniciado por ryugen Ver Mensaje
Cuando de formas geometricas se trata suelo recurrir a este post:
[url]http://css-tricks.com/examples/ShapesOfCSS/[/url]

Para diamantes (o rombos) puedes ver acá:
[url]http://viget.com/inspire/who-says-the-web-is-just-for-squares[/url]

Me parece brutal todo lo del primer link xD
  #13 (permalink)  
Antiguo 22/01/2013, 13:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 5 meses
Puntos: 2111
Respuesta: div con formas geométricas

Cita:
Iniciado por kraxxis Ver Mensaje
Me parece brutal todo lo del primer link xD
El blog de Chris Coyier es casi esencial seguirlo.
  #14 (permalink)  
Antiguo 22/01/2013, 14:32
Avatar de RafaRG  
Fecha de Ingreso: julio-2011
Ubicación: Córdoba, España
Mensajes: 124
Antigüedad: 8 años, 6 meses
Puntos: 13
Respuesta: div con formas geométricas

Cita:
Iniciado por ryugen Ver Mensaje
Cuando de formas geometricas se trata suelo recurrir a este post:
http://css-tricks.com/examples/ShapesOfCSS/

Para diamantes (o rombos) puedes ver acá:
http://viget.com/inspire/who-says-th...st-for-squares
vaya, hace tiempo que solucioné este tema (aquí mi primera figura en canvas, no demasiada profesional)
Código HTML:
<canvas id="dibujo"></canvas>
<script type="text/javascript">
	var canvas = document.getElementById('dibujo');
	var ctx = canvas.getContext('2d');
	//carrocería
	ctx.fillStyle="red";
	ctx.beginPath();
	ctx.moveTo(60, 35);
	ctx.lineTo(90, 19.5);
	ctx.lineTo(105,14);
	ctx.lineTo(140,11);
	ctx.lineTo(150,12);
	ctx.lineTo(165,13);
	ctx.lineTo(170,15);
	ctx.lineTo(190,30);
	ctx.lineTo(195,30);
	ctx.lineTo(210,17);
	ctx.lineTo(230,17);
	ctx.lineTo(223,30);
	ctx.lineTo(226,30);
	ctx.lineTo(225,35);
	ctx.lineTo(225,52);
	ctx.lineTo(227.5,55);
	ctx.lineTo(227.5,74);
	ctx.lineTo(225,76);
	ctx.lineTo(200,78);
	ctx.arc(180,70,20,0, 3.14,true);
	ctx.lineTo(160,80);
	ctx.lineTo(70,80);
	ctx.arc(50,70,20,0, 3.14,true);
	ctx.lineTo(30,80);
	ctx.lineTo(1.5,80);
	ctx.lineTo(0,77);
	ctx.lineTo(0,75);
	ctx.lineTo(2,72);
	ctx.lineTo(2,65);
	ctx.lineTo(0,62);
	ctx.lineTo(0,45);
	ctx.lineTo(6,42);
	ctx.lineTo(30,37.3);
	ctx.lineTo(60,35);
	ctx.closePath();
	ctx.fill();
	//ruedas
	ctx.fillStyle="black";
	ctx.beginPath();
	ctx.moveTo(162,70);
	ctx.arc(180,70,19,3.14, -3.14,true);
	ctx.moveTo(32,70);
	ctx.arc(50,70,19,3.14, -3.14,true);
	ctx.closePath();
	ctx.fill();
	//lantas
	ctx.lineWidth="2";
	ctx.beginPath();
	ctx.strokeStyle="lightgrey";
	ctx.moveTo(164,70);
	ctx.arc(180,70,16,3.14, -3.14,true);
	ctx.moveTo(34,70);
	ctx.arc(50,70,16,3.14,-3.14,true);
	ctx.stroke();
	ctx.closePath();	

	ctx.beginPath();
	ctx.strokeStyle="lightgrey";
	ctx.moveTo(164,70);
	ctx.lineTo(196,70);
	ctx.moveTo(180,54);
	ctx.lineTo(180,86);
	ctx.moveTo(169,59);
	ctx.lineTo(191,81);
	ctx.moveTo(191,59);
	ctx.lineTo(169,81);

	ctx.moveTo(34,70);
	ctx.lineTo(66,70);
	ctx.moveTo(50,54);
	ctx.lineTo(50,86);
	ctx.moveTo(39,59);
	ctx.lineTo(61,81);
	ctx.moveTo(61,59);
	ctx.lineTo(39,81);
	ctx.stroke();
	ctx.closePath();
	
	ctx.fillStyle="lightgray";
	ctx.beginPath();
	ctx.moveTo(164,70);
	ctx.arc(180,70,8,3.14, -3.14,true);
	ctx.moveTo(34,70);
	ctx.arc(50,70,8,3.14,-3.14,true);
	ctx.closePath();
	ctx.fill();
	//faros
	ctx.fillStyle="white";
	ctx.beginPath();
	ctx.moveTo(4,51);
	ctx.lineTo(23,51);
	ctx.lineTo(23,44);
	ctx.lineTo(4,47);

	ctx.moveTo(224,35);
	ctx.lineTo(224,43);
	ctx.lineTo(214,43);
	ctx.lineTo(218,35);
	ctx.lineTo(224,35);
	ctx.closePath();
	ctx.fill();
	
	//adornos
	ctx.fillStyle="black";
	ctx.beginPath();
	ctx.moveTo(6,72);
	ctx.lineTo(10,73);
	ctx.lineTo(15,73);
	ctx.lineTo(13,65);
	ctx.lineTo(5,65);
	ctx.lineTo(5,71);
	ctx.lineTo(6,72);
	ctx.closePath();
	ctx.fill();
	
	ctx.fillStyle="black";
	ctx.beginPath();
	ctx.arc(55,67,25,0,Math.PI*1.7,true);
	ctx.arc(50,69,25,Math.PI*1.65,Math.PI*1.97,false);
	ctx.closePath();
	ctx.fill();
	
	//puertas
	ctx.lineWidth="0.5";
	ctx.strokeStyle="silver";
	ctx.moveTo(81,70);
	ctx.lineTo(81,45);
	ctx.lineTo(85,30);
	ctx.lineTo(105,19);
	ctx.lineTo(140,16);
	ctx.lineTo(150,17);
	ctx.lineTo(165,18);
	ctx.lineTo(170,20);
	ctx.lineTo(175,24);
	ctx.lineTo(178,28);
	ctx.lineTo(179,30);
	ctx.lineTo(180,32);
	ctx.lineTo(180,33);
	ctx.lineTo(178,38);
	ctx.lineTo(174,44);
	ctx.lineTo(168,50);
	ctx.lineTo(160,59);
	ctx.lineTo(160,60);
	ctx.lineTo(159,62);
	ctx.lineTo(158,63);
	ctx.lineTo(156,66);
	ctx.lineTo(153,68);
	ctx.lineTo(150,70);
	ctx.lineTo(81,70);
	ctx.moveTo(130,70);
	ctx.lineTo(130,45);
	ctx.lineTo(131,30);
	ctx.lineTo(132,17);
	ctx.stroke();
	
	
</script> 

pero esa página que has aportado está genial. muchas gracias
  #15 (permalink)  
Antiguo 22/03/2013, 09:57
 
Fecha de Ingreso: noviembre-2006
Mensajes: 83
Antigüedad: 13 años, 1 mes
Puntos: 2
Respuesta: div con formas geométricas

Primero gracias, yo andaba buscando como hacer un triangulo...

La pregunta es si canvas ya me lo soporta los moviles y si se puede hacer responsive desing?


gracias por todo y a todos!
  #16 (permalink)  
Antiguo 22/03/2013, 10:05
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 5 meses
Puntos: 2111
Respuesta: div con formas geométricas

Puedes ver aquí una tabla de compatibilidad: http://caniuse.com/canvas

De todas formas, yo no he mirado mucho canvas, pero a priori me parece que SVG es más escalable —valga la redundancia— que canvas y en general me parece más limpio. Pero esto lo digo sin saber mucho de canvas, así que seguramente sea un atrevimiento de lo más obsceno.
  #17 (permalink)  
Antiguo 22/03/2013, 10:24
 
Fecha de Ingreso: noviembre-2006
Mensajes: 83
Antigüedad: 13 años, 1 mes
Puntos: 2
Respuesta: div con formas geométricas

Amigo es que quiero hacer como el ejemplo que te voy a poner pero con otras medidas y no se como hacerle, quiero que sea ancho pero no alto!

http://codepen.io/rzea/pen/feiLs
  #18 (permalink)  
Antiguo 22/03/2013, 10:45
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 5 meses
Puntos: 2111
Respuesta: div con formas geométricas

Según el ejemplo:

Código CSS:
Ver original
  1. div.f:before {
  2.   content:"";
  3.   float:left;
  4.    height:0;
  5.    width:0;
  6.    border-top:100px solid green;
  7.    border-right:100px solid transparent;
  8. }

Con aumentar el valor de border-right se vuelve más ancho. Ponlo a 200px por ejemplo para que veas el cambio.

Etiquetas: formas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 01:35.