- Desde
- 22 Ago 2014
- Mensajes
- 991
Hola, recientemente he estado haciendo algunos retoques a uno de mis sitios y me encuentro con un problema.
Resulta que las propiedades -webkit-clip-path y clip-path funcionan muy bien en Chrome, pero no en Firefox, Internet Explorer y Edge, por lo que mi sitio se ve de la siguiente manera en Firefox y Chrome:
Como verán, los botones se ven bien en Chrome, pero en Firefox no se aplica la propiedad clip-path , ya que algunos de los extremos de los botones se siguen viendo.
Me preguntaba cómo se puede solucionar esto en Firefox por lo menos.
Este es el .css que tengo aplicado a los botones:
Espero tu ayuda. Saludos.
Resulta que las propiedades -webkit-clip-path y clip-path funcionan muy bien en Chrome, pero no en Firefox, Internet Explorer y Edge, por lo que mi sitio se ve de la siguiente manera en Firefox y Chrome:
Me preguntaba cómo se puede solucionar esto en Firefox por lo menos.
Este es el .css que tengo aplicado a los botones:
Insertar CODE, HTML o PHP:
.home .article .fap-play-button {
background-color: #FDA360;
color: #555;
padding-top: 29px;
padding-bottom: 0;
padding-left: 28px;
padding-right: 3px;
position: relative;
right: -137px;
top: 78px;
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
-webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
border-bottom-right-radius: 6px;
border-top-right-radius: 0;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-topright: 0;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-top-right-radius:0;
}
.home .article .fap-play-button:hover {
background-color: #f14747;
color: #ffffff;
padding-top: 29px;
padding-bottom: 0;
padding-left: 28px;
padding-right: 3px;
position: relative;
right: -137px;
top: 78px;
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
-webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
border-bottom-right-radius: 6px;
border-top-right-radius: 0;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-topright: 0;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-top-right-radius:0;
}
.home .article .fap-referral-button {
background-color: #2a2a2a;
color: #fda360;
clip-path: polygon(0 1%, 100% 0, 80% 100%, 20% 100%);
-webkit-clip-path: polygon(0 1%, 100% 0, 80% 100%, 20% 100%);
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
position: relative;
left: 28px;
top: 54px;
padding-left: 16px;
padding-right: 22px;
padding-top: 0;
padding-bottom: 0;
}
.home .article .fap-referral-button:hover {
background-color: #38b7ee;
color: #ffffff;
clip-path: polygon(0 1%, 100% 0, 80% 100%, 20% 100%);
-webkit-clip-path: polygon(0 1%, 100% 0, 80% 100%, 20% 100%);
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
position: relative;
left: 28px;
top: 54px;
padding-left: 16px;
padding-right: 22px;
padding-top: 0;
padding-bottom: 0;
}Espero tu ayuda. Saludos.
