Votre navigateur ne supporte pas cette démonstration
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).
<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;
}