Este es mi objetivo. Pestañas en ángulo con transparencia una encima de la otra. ¿Cómo construiría esto sin usar jpgs o pngs, pero solo css?¿Cómo puedo hacer una interfaz de pestañas en ángulo con solo jquery y css3?
Este tuts le conseguirá ir pero voy a tratar de maqueta algo en un minuto!
http://www.howtocreate.co.uk/tutorials/css/slopes
http://net.tutsplus.com/articles/news/fun-with-css-shapes/
Por cierto gran pregunta!
Editar:
Aquí es el "final" resultado:
Ver que here!
NOTA:
Sólo ten en cuenta que este es un "hack", y que tal vez no sea la mejor idea para poner en práctica en realidad, creo (no puede probarlo ahora) IE tiene algunos problemas con este , si se le pregunta acerca de la usabilidad y la accesibilidad, yo diría que ir con imágenes :)
'border-right' debe ser' # fff' :) – Dutchie432
Esto es genial, pero ¿qué ocurre si deseo agregar un trazo sólido alrededor de las pestañas como mi imagen? Sería difícil si las pestañas en ángulo ya son bordes, ¿no? – WillingLearner
@WillingLearner Déjame ver ... ¡podría ser! – Trufa
Mi opinión sobre esto sería el uso de CSS para crear ángulos: http://www.howtocreate.co.uk/tutorials/css/slopes o http://www.dinnermint.org/blog/css/creating-triangles-in-css/
se crea el 'fin' pieza de la pestaña como un ángulo que es blanco/bl ack, y luego use jquery para aplicar transparencia y selección.
Eso debería ayudarlo a comenzar sin imágenes.
¿Tiene que ser con CSS o solo espera no utilizar imágenes de trama? Podría, por ejemplo, usar una imagen de fondo SVG, que probablemente tendrá un tamaño de archivo más pequeño que una imagen ráster y se escalará mejor. Puede utilizar un uri de datos si le preocupan las solicitudes HTTP. También podría usar un SVG o png como imagen de borde si no desea utilizar background-image.
¿Las esquinas redondeadas do? o necesitan estar en ángulo –
esto es casi imposible de hacer solo con CSS. hay algunas cosas locas que puedes hacer con javascript, por supuesto, pero definitivamente no vale la pena el ahorro de tiempo que obtendrías al usar imágenes. – Jason