Aller au contenu principal
Partagez cette démonstration :

Fil d'ariane avec CSS Houdini

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@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.