可扩展的非矩形 CSS 按钮？答案

【问题标题】：Expandable, non-rectangular CSS button?可扩展的非矩形 CSS 按钮？
【发布时间】：2012-12-26 06:48:36
【问题描述】：

在网上搜索了很多之后，我发现了很多关于使用 CSS 设置提交按钮样式的建议和示例，但它们都生成了矩形按钮。我想制作一个非矩形按钮，它会自动调整大小以适应按钮图例。具体来说，我希望按钮看起来像这样（加或减圆角）：

有什么建议吗？

【问题讨论】：

您是否考虑过使用伪元素生成三角形？
cssnerd.com/2011/11/30/… 使用css阴影曲线等
您需要使用图像，或者按照@ScottSimpson 的建议，研究制作 css 三角形。 border-radius:0 30px 30px 0 不会做你想做的事。
这是我为面包屑导航制作的SO Answer，它优雅地回退到可访问性要求，但它是 CSS3。
您需要支持的 IE 较低版本是多少？ @Nate 感谢您的链接，将证明有用

标签： css html

【解决方案1】：

完全可以使用边框半径，但您必须使用 JavaScript 而不是 <button> 元素提交。

例如：

.icon {
background-color: lightblue;
width: 100px;
padding: 4px;
margin: 10px;

border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;

border-top-right-radius: 60px 22px;    
-moz-border-radius-topright: 60px 22px;   
border-bottom-right-radius: 60px 22px;   
-moz-border-radius-bottomright: 60px 22px;
}

制作：

现场观看：

http://jsfiddle.net/9zamA/

【讨论】：

+1 优秀的 CSS3 解决方案！将你的答案与我在另一个answer 中的额外代码一起使用会产生这个新的jsFiddle。请注意，HTML 内部内容是为了增强可访问性后备以显示图形箭头。干杯！
酷，谢谢！不过，我并不喜欢子弹形的圆角。在我的新手看来，我们应该能够创建一个矩形“容器”，其中包含一个包含按钮图例和相邻三角形的彩色矩形。

【解决方案2】：

您可以使用 CSS 边框三角形技巧：http://css-tricks.com/snippets/css/css-triangle/

你可以使用 svg。

【讨论】：

-1 每个 OP 要求没有圆角或图像。
从技术上讲，OP 并没有说不允许使用图像和/或圆角。唯一的要求是按钮不是矩形的并且可以随文本缩放。
感谢 allyourcode。是的，你说得对，我有点喜欢圆角，但我真的很想把一个矩形挂在一个三角形上。