Foros del Web » Creando para Internet » CSS »

clip path polygon a svg para firefox

Estas en el tema de clip path polygon a svg para firefox en el foro de CSS en Foros del Web. Hola, tengo una css con un clip path que funciona muy bien en Chrome y Safari, pero en Firefox NO. Es este: -webkit-clip-path:polygon(calc(100% - 20px) ...
  #1 (permalink)  
Antiguo 14/08/2016, 08:48
Avatar de Pentaxeros  
Fecha de Ingreso: mayo-2008
Mensajes: 173
Antigüedad: 15 años, 10 meses
Puntos: 3
clip path polygon a svg para firefox

Hola, tengo una css con un clip path que funciona muy bien en Chrome y Safari, pero en Firefox NO.

Es este:
-webkit-clip-path:polygon(calc(100% - 20px) 0%,100% 50%,calc(100% - 20px) 100%,0% 100%,20px 50%,0% 0%);
clip-path:polygon(calc(100% - 20px) 0%,100% 50%,calc(100% - 20px) 100%,0% 100%,20px 50%,0% 0%);

El resultado:


El poligono, marco las algunas esquinas usando calc(100% - 20px) lo que me permite referenciarlas con respecto al lado derecho.
Asi tenga el ANCHO QUE TENGA la caja, las esquinas son iguales.

EN FIREFOX NO FUNCIONA, pero he visto que tengo que convertir mi poligono en SVG.
Mi problema es que NO SE COMO REFERENCIAR las coordenadas unas al lado derecho y otras al izquierdo.

<svg width="0" height="0">
<defs>
<clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
<polygon points="calc(100% - 20px) 0,1 .5,calc(100% - 20px) 1,0 1,20px .5,0 0" />
</clipPath>
</defs>
</svg>

Los parametros que he puesto en NEGRITA es lo que no se como hacer...

¿Alguna idea?

GRACIAS!!

Etiquetas: firefox, orden, path, svg, width
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 01:13.