Foros del Web » Creando para Internet » CSS »

forma circular compuesta de quesitos

Estas en el tema de forma circular compuesta de quesitos en el foro de CSS en Foros del Web. Buenas, Mi pregunta es como se podría crear un circulo con triángulos, estilo quesitos. Estos triángulos a su vez son checkbox, es decir, el circulo ...
  #1 (permalink)  
Antiguo 18/11/2013, 09:05
 
Fecha de Ingreso: mayo-2012
Mensajes: 11
Antigüedad: 6 años, 3 meses
Puntos: 0
forma circular compuesta de quesitos

Buenas,

Mi pregunta es como se podría crear un circulo con triángulos, estilo quesitos. Estos triángulos a su vez son checkbox, es decir, el circulo debe de estar compuesto por 7 triángulos que corresponden con los días de la semana. El comportamiento debe ser el de un checkbox, ya he hecho algo parecido pero no con esta forma.

Adjunto una imagen de los triángulos para que podáis imaginar de lo que estoy hablando. Los triángulos al pursarlos deben de cambiar de color para que el usuario pueda comprobar que está marcada la opción que pretende.

Lo que me interesaría es averiguar como crear este circulo compuesto de triángulos. Si alguien tiene alguna idea de como podría desarrollarlo se lo agradecería, por remota que pueda ser, puede ser de utilidad.

http://subefotos.com/ver/?65169ac1d1f74e4ed4c2356d461eb2edo.png#codigos

Un saludo, gracias!!
  #2 (permalink)  
Antiguo 18/11/2013, 14:46
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.561
Antigüedad: 16 años, 4 meses
Puntos: 1266
Respuesta: forma circular compuesta de quesitos

Hola:

Una opción es el formato svg, pero descartando los viejos navegadores... casi lo mismo sería imágenes canvas... la tercera opción es un mapa de imágenes... te recomiendo que te informes sobre esas opciones...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 18/11/2013, 15:59
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.481
Antigüedad: 16 años
Puntos: 2109
Respuesta: forma circular compuesta de quesitos

Es un poco complicado hacerlo, no son realmente triángulos como tales, pero igual esto puede servirte: http://codepen.io/pzin/pen/snlDq

Para ver el código CSS (en lugar de Sass) haz click en esa pestaña justo encima de las siglas de CSS.

Para hacerlo como un formulario, puedes usar label e input tipo checkboxes, estos últimos dentro del primer, y también appearance: none.

No es fácil hacerlo. Aunque seguro que quedaría muy bien.
  #4 (permalink)  
Antiguo 19/11/2013, 06:40
 
Fecha de Ingreso: mayo-2012
Mensajes: 11
Antigüedad: 6 años, 3 meses
Puntos: 0
Respuesta: forma circular compuesta de quesitos

Excelentes respuestas, pero me he decantado por la del compañero pzin, dado que parece más fácil y rápido.

Ya tengo el circulo y tal, pero el problema viene cuando intento colocar y alinear los 7 quesitos. Ya tengo creados todos, utilizo la propiedad z-index para solapar las formas. Pero el último tapa al que tiene pegado, he probado con un border-width pero sin éxito.

Osea, que tengo todo creado pero uno de los quesitos solapa al otro. ¿Alguna idea?

Un saludo, y gracias de nuevo por las respuestas, han sido de mucha utilidad.
  #5 (permalink)  
Antiguo 19/11/2013, 14:41
 
Fecha de Ingreso: agosto-2013
Mensajes: 46
Antigüedad: 5 años
Puntos: 12
Respuesta: forma circular compuesta de quesitos

Busca por pie charts css
https://www.google.es/search?q=pie+charts+css

Etiquetas: circular, color, compuesta, forma
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




La zona horaria es GMT -6. Ahora son las 17:40.