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