I'm currently working on a shape-based menu, but I'm encountering issues specifically in Safari. The layout gets distorted in Safari, and I'm struggling to understand the cause. Interestingly, when I use CSS clip-path without the SVG tag, it works perfectly in Safari and Chrome but not in Firefox.
Here's the CSS:
.menu {
width: 65%;
height: 40px;
background-color: red;
-webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-webkit-clip-path: url("#clipping");
clip-path: url("#clipping");
position: absolute;
right: 0px;
bottom: 0;
}
.menu:before {
content: '';
width: 99.8%;
height: 40px;
-webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-webkit-clip-path: url("#clipping");
clip-path: url("#clipping");
background: black;
display: block;
position: absolute;
top: 2px;
left: 2px;
right: 2px;
}
And here's the HTML:
<div class="menu">
<svg width='0' height='0'>
<defs>
<clipPath id="clipping" clipPathUnits="objectBoundingBox">
<polygon points="0.05 0, 1 0, 1 1, 0 1, 0 1" />
</clipPath>
</defs>
</svg>
</div>
Any insights or suggestions would be greatly appreciated. Thank you!