28172 sujets

CSS et mise en forme, CSS3

[Résolu] Clip-path ne fonctionne pas avec safari

Bonsoir,
Je souhaiterais faire fonctionner clip-path avec Safari. J'ai trouvé ceci https://stackoverflow.com/questions/41860477/why-doesnt-css-clip-path-with-svg-work-in-safari. Je n'arrive pas à transposer cet exemple à mon cas.
Je joins mon code :

   .card-explore__img::after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      clip-path: polygon(0 83%, 0% 100%, 100% 100%);
      background: #fff;
      width: 100%;
      height: 190px; }


    						<div class="card card-explore">
          						<div class="card-explore__img">
                					<img class="card-img" src="img/home/gite-moelan-sur-mer-jardin-clos-ti-goudoul-360x343.jpg" alt="">
              					</div>
              					<div class="card-body">
            						<h6 class="card-explore__title">Le jardin</h6>
        							<p>Pour vous reposer et vous détendre, profitez du jardin clos. </p>
                					<a class="card-explore__link" href="location-d-un-gite-independant-en-bretagne.html">En savoir plus <i class="ti-arrow-right"></i></a>
              					</div>
            				</div>


Merci par avance pour votre aide.
Marie
Modifié par Felipe (31 Oct 2019 - 17:11)
Bonjour,

Merci pour votre réponse.
Cela me parait effectivement bien compliqué à mon niveau. Ne serait-il pas possible que le clip-path ne soit pas pris en compte dans le css seulement pour Safari ?
Merci.
Administrateur
Bonjour,

est-ce que vous avez ajouté le préfixe -webkit- pour Safari comme indiqué par la réponse sur SO (et confirmé par caniuse - ouh c'est pas clair entre les données "historiques" de caniuse et celles récentes issues du partenariat avec MDN…) ?

Ça donnerait :

   .card-explore__img::after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      -webkit-clip-path: polygon(0 83%, 0% 100%, 100% 100%);
      clip-path: polygon(0 83%, 0% 100%, 100% 100%);
      background: #fff;
      width: 100%;
      height: 190px; }


Sinon tester sur un élément et pas un pseudo dès fois qu'un bug n'existe que dans ce cas…
Modifié par Felipe (31 Oct 2019 - 17:17)
Meilleure solution
Sujet clos
Aller à