Faire un Webkit-Gradient en round rect (mask)
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:
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:
-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.
