div con formas geométricas

[RafaRG]

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

[murk23]

para que quieres divs redondos o triangulares?

[RafaRG]

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

[cristian_cena]

aca podes ver como hacer triangulos: http://jonrohan.me/guide/css/creating-triangles-in-css/
Espero te sea útil.

[RafaRG]

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.

[cristian_cena]

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.

[RafaRG]

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

[cristian_cena]

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

[RafaRG]

ey, pues me viene de lujo. gracias otra vez :D

[pablofveiga]

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!

[ryugen]

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

[kraxxis]

Iniciado por ryugen

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

[pzin]

Iniciado por kraxxis

Me parece brutal todo lo del primer link xD

El blog de Chris Coyier es casi esencial seguirlo.

[RafaRG]

Iniciado por ryugen

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

[pembe180]

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!

[pzin]

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.

[pembe180]

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

[pzin]

Según el ejemplo:

Código CSS:

div.f:before {
  content:"";
  float:left;
   height:0;
   width:0;
   border-top:100px solid green;
   border-right:100px solid transparent;
}
 

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