He usado algunas formas de polígonos de ruta de recorte para crear cuadros de contenido que apuntan hacia abajo en mi sitio, puede ver algunos ejemplos en la página de inicio aquí: http://550.9f2.myftpupload.com/ y este es el CSS que estoy usando:
.bottom_arrow {
-webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
}
Pero entiendo que esto no funciona en Firefox sin algunas modificaciones (¿como usar una URL .svg?) y que incluso esto no funciona en IE y Edge. ¿Hay algún truco CSS alternativo que pueda usar para hacer estas formas que tenga mejor compatibilidad con varios navegadores?
Esta pregunta recibió un bache recientemente porque no tenía respuesta. En 2020, vivimos en un mundo donde clip-path es apoyo casi universal. ¡Así que creo que es seguro decir que los navegadores se han puesto al día y el caso está cerrado!
Me encontré con este problema al crear este sitio aquí http://mindcloak.com/vici/.
Mi forma de evitar esto fue ocultar las rutas de clip en estos navegadores y usar formas css.
clip-path regular
.tri-green-left {
width: 101%;
height: 400px;
position: absolute;
z-index: 15;
background: rgba(93,140,127,0.7);
-webkit-clip-path: polygon(0 0, 5% 0, 25% 100%, 0 100%);
clip-path: polygon(0 0, 5% 0, 25% 100%, 0 100%);
}
css formas para mostrar para navegadores no compatibles
/* Material de estilo IE 10+ */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
#triangle-greenleft {
width: 0;
height: 0;
margin-top: -50px;
border-bottom: 900px solid rgba(93,140,127,0.7);
border-right: 750px solid transparent;
overflow: hidden;
}
/* Compatibilidad con navegador Egde */ @supports (-ms-ime-align:auto) {
#triangle-greenleft {
width: 0;
height: 0;
border-bottom: 700px solid rgba(93,140,127,0.7);
border-right: 200px solid transparent;
overflow: hidden;
}
Gracias, ¿hay alguna alternativa que sugiera para producir este efecto que tenga una mejor compatibilidad con el navegador? Particularmente IE y Edge?
– AndrewCoCo
7 febrero 2017 a las 14:45
IE no recortará elementos html, por lo que debe implementar cosas en SVG para recortarlos con un clipPath SVG.
– Robert Longson
7 febrero 2017 a las 15:32
¿Eso significa esencialmente que necesito hacer que el fondo sea un rectángulo SVG sólido, y luego podré aplicar una ruta de recorte a ese SVG?
– AndrewCoCo
7 febrero 2017 a las 17:26
O eso o simplemente dibujar la forma que desea en SVG directamente.
– Robert Longson
7 febrero 2017 a las 17:27
@RobertLongson Parece que todavía no puedo hacer que esto funcione. Hice el fondo del bloque verde debajo del banner superior de esta página en un SVG 550.9f2.myftpupload.com/about/bob-stutman con un nombre de clase de .style-svg, entonces, ¿no debería funcionar el CSS a continuación?
code .style-svg { -webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0); clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0); }– AndrewCoCo
7 febrero 2017 a las 18:33