Html CSS-带有两个截断角的按钮

大家好，我想创建一个

，如上图所示，背景为

透明；边框：1px实心#999

。我已经检查了以前类似的问题，但由于它是3岁，我想检查是否有更好的解决方案

---

你对如何达到这个结果有什么想法吗？提前感谢您的回复

您不应该使用透明背景，您应该像这样使用url属性

选择器{
背景：url（图像地址）；
}

您不应该使用透明背景，您应该像这样使用url属性

选择器{
背景：url（图像地址）；
}
这里有一个JS小提琴，我在
：before
和
：after
中使用了一个小技巧


您可以将
：before
和
：after
的背景替换为您的背景，以正确匹配它。
这里有一个JS小提琴，我在
：before
和
：after
中使用了一个小技巧


您可以将
：before
和
：after
的背景替换为您的背景以正确匹配它。
您可以使用
：before
和
：after
伪元素执行类似操作


正文{
背景：白色；
}
钮扣{
填充：20px 45px；
边框：1px实心#999999；
显示：内联块；
位置：相对位置；
背景：白色；
颜色：#999999；
}
按钮：前，按钮：后{
高度：25px；
宽度：25px；
背景：白色；
位置：绝对位置；
内容：''；
}
按钮：之前{
排名：0；
左：0；
右边框：1px实心#999999；
变换：旋转（49度）平移（-71%）；
}
按钮：之后{
底部：0；
右：0；
左边框：1px实心#999999；
变换：旋转（49度）平移（71%）；
}
单击我
您可以使用
:before
和
:before
伪元素


正文{
背景：白色；
}
钮扣{
填充：20px 45px；
边框：1px实心#999999；
显示：内联块；
位置：相对位置；
背景：白色；
颜色：#999999；
}
按钮：前，按钮：后{
高度：25px；
宽度：25px；
背景：白色；
位置：绝对位置；
内容：''；
}
按钮：之前{
排名：0；
左：0；
右边框：1px实心#999999；
变换：旋转（49度）平移（-71%）；
}
按钮：之后{
底部：0；
右：0；
左边框：1px实心#999999；
变换：旋转（49度）平移（71%）；
}
点击我
你能解释一下原因吗？OP并没有试图使用图像来创建按钮，而是使用边框。我还想使用
svg
作为图像，但首先我想看看是否可以使用纯
css
来创建按钮。你能解释一下原因吗？OP并没有试图使用图像来创建按钮，而是使用边框。我还想使用
svg
作为图像，但首先我想看看是否有可能使用纯
css
来创建按钮。这非常接近，但是在视网膜显示器上（可能还有其他具有亚像素渲染的显示器）伪元素的边框与父元素的边框不完全匹配。与@Vincent G一样，它非常接近，但如果有透明的背景，那就太酷了。我在显示器上看不到它，但可以使用
transform:rotate（）translate（）进行调整@d_z90我更新了我的答案。这非常接近，但在视网膜监视器（可能还有其他亚像素渲染）上，伪元素的边界并不完全符合父元素的边界。与@Vincent G一样，它非常接近，但是有一个透明的背景会很酷我在显示器上看不到，但是可以用
transform:rotate（）translate（）进行调整
@d_z90我更新了我的答案。这非常接近，但在视网膜监视器（可能还有其他亚像素渲染）上，伪元素的边界并不完全符合父元素的边界。这是一个很好的解决方案，但如果设置
background:transparent
，它看起来就不好了。这非常接近，但在视网膜监视器上（可能还有其他使用亚像素渲染的情况）伪元素的边界与父元素的边界不完全匹配。这是一个很好的解决方案，但如果设置
background:transparent
，它看起来就不太好了。
button { background: #fff; padding: 8px 10px; border: 1px solid #333; box-shadow: none; position: relative;  }

button:before {content: ""; width: 10px; height: 15px; position: absolute; border-right: 1px solid #333; left: -5px; top: -6px; transform: rotate(45deg); background: #fff}

button:after {content: ""; width: 10px; height: 15px; position: absolute; border-left: 1px solid #333; right: -5px; bottom: -6px; transform: rotate(45deg); background: #fff}