I'm currently experimenting with creating a unique hexagonal border around a button. My approach involves enlarging the container element by a few pixels compared to the button size and using the same clip-mask on both elements to achieve a bordered effect. This method functions effectively in Firefox and Chrome, however, it encounters issues in Safari.
document.getElementById("button").addEventListener("click", function(){alert("foo"); return false;});div {
width: 9rem;
height: 8rem;
position: relative;
clip-path: url("#hexagon");
-webkit-clip-path: url("#hexagon");
background-color: #e2e3e5;
}
button {
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
padding: calc(8rem * 0.1) calc(9rem * 0.2);
width: calc(9rem - 4px);
height: calc(8rem - 4px);
clip-path: url("#hexagon");
-webkit-clip-path: url("#hexagon");
background-color: white;
border: none;
}<div id="div">
<button id="button">The button</button>
</div>
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="hexagon" clipPathUnits="objectBoundingBox">
<polygon points=".25 0, .75 0, 1 .5, .75 1, .25 1, 0 .5"/>
</clipPath>
</defs>
</svg>When I omitted -webkit-clip-path, Safari displayed a rectangular border instead of a hexagon. Adding it caused the resulting hexagon's width to be larger than expected when viewed in other browsers. The clip path seems to be covering more of the button area than intended. Is there any workaround to address this issue and ensure compatibility with Safari?
Firefox: https://i.stack.imgur.com/F9tcXs.png Safari: https://i.stack.imgur.com/duw3ss.png