如何使用剪辑路径属性来弯曲自定义多边形元素？

Question

我在使用 **CSS ** 实现按钮时遇到问题，该按钮的概念如下图所示。

我发现更好的解决方案可以是 **polygon ** 和 clip-path 属性，但确实，当你使用多边形时，你不能设置角的半径。

注意：找到一种可以利用动态内容和元素动态大小的解决方案非常重要。

这就是概念：

这是我用 Clip-path:polygons (tailwindcss) 实现的。

<div
 class="w-[172px] h-12 mb-10 bg-[#F5910D] flex items-center justify-center"
 style="clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)"
 >
     <span class="text-white text-lg font-bold">All Products</span>
 </div>

有人有解决办法吗？

我尝试使用 SVG 过滤器 和 stdDeviation 属性，但它不适用于多边形。

Answer 1

这听起来可能有点复杂。您可以用 PNG 替换 SVG。

style='
--img-width:30px;
background:
url("data:image/svg+xml,%3Csvg%20version%3D%221.2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2093%20162%22%20width%3D%2293%22%20height%3D%22162%22%3E%20%3Cpath%20id%3D%22Shape%201%20copy%22%20class%3D%22s0%22%20d%3D%22m92.3%20161.3h-79c0%200-11.5-2.6-12-12%200.1-2.8%200-103%200-103%200%200-2.3-5.5%205-12%207.4-6.6%2027-28%2027-28%200%200%205-7.2%2016-6%2012.9-0.7%2043%200%2043%200z%22%20fill%3D%22%23ed9422%22%2F%3E%20%3C%2Fsvg%3E") center left / contain no-repeat,

url("data:image/svg+xml,%3Csvg%20version%3D%221.2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2092%20162%22%20width%3D%2292%22%20height%3D%22162%22%3E%20%3Cpath%20id%3D%22Shape%201%22%20class%3D%22s0%22%20d%3D%22m0%200h79c0%200%2011.5%202.6%2012%2012-0.1%202.7%200%20103%200%20103%200%200%202.3%205.5-5%2012-7.3%206.5-27%2028-27%2028%200%200-4.9%207.2-16%206-12.9%200.6-43%200-43%200z%22%20fill%3D%22%23ed9422%22%2F%3E%20%3C%2Fsvg%3E") center right / contain no-repeat,

linear-gradient(90deg, transparent var(--img-width), #ed9422 var(--img-width), #ed9422 calc(100% - var(--img-width)), transparent calc(100% - var(--img-width)));'

现在您只需根据您的需要调整

--img-width:30px;

即可。

希望这有帮助。