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;
}