Une autre méthode pour cela qui peut également avoir un support limité est "SVG intégré dans CSS". Je n'ai pas essayé cela moi-même mais l'idée est que vous fournissez une ressource d'image sous forme d'URL dans la déclaration CSS de l'objet et que vous lui transmettiez une URL correctement échappée qui contient les données.
SVG est un format texte brut / xml. Un exemple de polygone (de w3schools ):
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>
Un exemple de SVG en ligne (intégré) (simplifié) (à partir de stackoverflow ):
url("data:image/svg+xml;utf8, <svg></svg>");
Notez que les données SVG doivent être "échappées" correctement pour une utilisation en ligne, ce qui les rend légèrement moins attrayantes que la simple liaison d'un fichier SVG.
Il y a une discussion concernant la viabilité de la méthode dans le thread lié ci-dessus. Je pense qu'intégrer quelque chose d'aussi simple qu'un triangle rempli de blanc est une décision facile à condition que le soutien soit là. Les données au format SVG complexes doivent être stockées dans un fichier SVG plutôt qu'en ligne.
Les fichiers SVG sont vectoriels et peuvent être mis à l'échelle en pourcentage, contrairement à la méthode des «bordures». Ils ont également (actuellement) une meilleure prise en charge (au moins en ligne) que la méthode du chemin de détourage répertoriée. SVG, étant du texte brut, peut même être émis à la volée en utilisant par exemple PHP ou d'autres scripts côté serveur.