Discussion :

[Tardiff Jean-François]

Bonjour,

Les navigateurs sur lesquelles le code doit tourner sont chrome et chromium.
J'ai des div ayant des bordures à coins arrondis.
Les 4 coins peuvent avoir un arrondis différent (au choix du client).
Dans ces div, j'ai des contenus variables, dont la taille peut être supérieure à la taille du div (encore est toujours au choix du client).
Lorsque je mes overflow: Hidden; dans le style, la partie en dehors du div est bien caché, mais la partie visible reste rectangulaire (ne tient pas compte des bords arrondis).

Par exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
   <div class="container" style="overflow: hidden;position:absolute;left:154px;top:900px;width:1551px;height:325px;line-height:325px;background-color:rgba(242, 242, 242, 1);border: solid 1px rgba(0, 0, 0, 1);border-radius:93px;">  
        <img src="D:\Temp\Images\Chaussures\01 mocassin.jpg" style="2000px";>
     </div>

La seule méthode que j'ai trouvé pour établir un clippath sur mon dir (sans réécrire tout le générateur de HTML) est d'ajouter un -webkit-mask-image pour masquer les parties a cacher.

Il est possible de créer des masque a la volé en utilisant les création de gradients.
Exemple en ajoutant dans mon code CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 -webkit-mask-image: -webkit-radial-gradient(circle,rgba(0,0,0,0), rgba(0,0,0,1));

Mas question est la suivante. Existe il un moyen de créer un gradient de type roundrect ? (addition de plusieurs gradients, ordre ésotérique, je prendrais ce qui viendras. )

Si ce n'est pas possible, existe il une autre méthode ?

Je vous remercie par avance.

[Tardiff Jean-François]

J'ai une solution approximative.

En continuant à chercher j'ai finis par trouver une solution approximative.
Il semble que ce soit un bug connus pour tous les navigateur utilisant webkit (chrome, chromium, safari). Pour chrome et chromium le problème est contournable en ajoutant le masque.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

Ce n'est cependant pas une panacée. Les coins de la bordures sont rogné.
Cela peut cependant convenir dans un premier temps, le temps que le bug soit corrigé ou que quelqu’un trouve mieux.

Si vous trouvez plus pratique, je suis toujours preneur, mais cette solution devrait pouvoir dépanner d'autre, quitte a dessiné un second div sur le premier, pour voir les bordures.

Nota: Ci vous pouvez m'expliquer comment le même masque permet de régler le problème, j'avoue que j'utilise sans comprendre.