我正在尝试为按钮创建一个六边形边框。我的策略是使容器元素比按钮大几个像素,并在两个元素上使用相同的clip-mask
。大小上的差异应该会产生边框效果。这在Firefox和Chrome中很有效,但在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>
-webkit-clip-path
时,Safari中的边框是一个矩形。添加后,结果六边形的宽度比其他浏览器都大得多。似乎剪切路径覆盖了比按钮更多的区域。有没有什么方法可以解决这个问题,使其在Safari中表现良好?火狐:
![Button in Firefox](https://istack.dev59.com/F9tcXs.webp)
![Button in Safari](https://istack.dev59.com/duw3ss.webp)
<button>
元素。也许aria-*
属性可以很好地处理问题,但我不想冒任何风险。 - miken32role
属性的答案:https://dev59.com/Jmkv5IYBdhLWcg3wtTK7 - enxaneta<text>
元素识别为标签等。我确实同意SVG是更清洁和更优雅的解决方案,但可能会选择你的第一个方案。 - miken32clip-path: polygon()
实际上可以使用百分比,这使得事情比像素值更容易。 - miken32