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!!