Aller au contenu principal
Partagez cette démonstration :

Fil d'ariane avec CSS Houdini

Dernière mise à jour : février 2023

Nous allons utiliser CSS Houdini pour réaliser ce fil d'ariane. En effet, il n'est pas possible pour l'instant de placer des bordures sur des formes CSS (au moyen de la propriété clip-path).

Votre navigateur ne supporte pas cette démonstration.

Le code :



<ol class=navigation>

<li><a href="#!">Accueil</a>
<li><a href="#!">rubrique</a>
<li><a href="#!">rubrique</a>
<li><a href="#!">rubrique</a>

</ol>

<script>
if (CSS.paintWorklet) {
CSS.paintWorklet.addModule('js.js');
}
</script>




registerPaint(
    "borderDraw",
    class {
        static get inputProperties() {
            return ["--borderWidth", "--clipPath"];
        }

        paint(ctx, size, properties) {
            let borderWidth = properties.get("--borderWidth");
            let clipPath = properties.get("--clipPath");
            const width = size.width;
            const height = size.height;
            const paths = clipPath.toString().split(",");
            const cc = function (obj) {
                const x = obj[0];
                const y = obj[1];
                let fx = 0,
                    fy = 0;
                if (x.indexOf("%") > -1) {
                    fx = (parseFloat(x) / 100) * width;
                } else if (x.indexOf("px") > -1) {
                    fx = parseFloat(x);
                }
                if (y.indexOf("%") > -1) {
                    fy = (parseFloat(y) / 100) * height;
                } else if (y.indexOf("px") > -1) {
                    fy = parseFloat(y);
                }
                return [fx, fy];
            };

            var p = cc(paths[0].trim().split(" "));
            ctx.beginPath();
            ctx.moveTo(p[0], p[1]);
            for (var i = 1; i < paths.length; i++) {
                p = cc(paths[i].trim().split(" "));
                ctx.lineTo(p[0], p[1]);
            }
            ctx.closePath();
            ctx.lineWidth = borderWidth * 2;
            ctx.strokeStyle = "#000";
            ctx.stroke();
        }
    }
);




*,
*::before,
*::after{

box-sizing: border-box

}
	
.navigation{

padding: 0;
list-style-type: none;	
display: flex;
flex-flow: wrap;
row-gap: 1rem;
margin: 4rem auto
	
	}	
		
.navigation li {

position: relative;
width: 200px;
height: 4rem;
--a: 15%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s;
-webkit-clip-path: polygon(var(--clipPath));
clip-path: polygon(var(--clipPath));
--clipPath: 85% 0%, 100% 50%, 85% 100%, 0% 100%, var(--a) 50%, 0% 0%;
--borderWidth: 2;
--color: #6753ea;

}
	
.navigation li a{

text-decoration: none;
color:#555


}	

.navigation li:first-child{
	
--a:0
	
}
	
.navigation li::before {
	
content: "";
position: absolute;
z-index: -1;
inset: 0;
-webkit-mask: paint(borderDraw);
mask: paint(borderDraw);
background: var(--color);
	
}
	
.navigation li:hover {
	
 background: var(--color);
 color: #fff;
	
}


	



Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail : contact[arobase]guyom-design[point]com. Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.