可扩展的非矩形CSS按钮？

在网上搜索了很多内容之后，我发现了很多关于使用CSS来设置提交按钮样式的建议和示例，但它们都是矩形按钮。我想制作一个非矩形按钮，自动调整大小以适合按钮图例。具体而言，我想按钮看起来像这样（加上或减去圆角）：可扩展的非矩形CSS按钮？

Non-rectangular button

有什么建议？

来源

2012-12-25 Bob.at.AIPsychLab

您是否研究过使用伪元素生成三角形？ –

http://cssnerd.com/2011/11/30/the-best-pure-css3-ios-style-arrow-back-button/使用CSS阴影曲线等 –

您需要使用图像，或正如@ScottSimpson所建议的，考虑制作css三角形。 'border-radius：0 30px 30px 0'不会完成你想要完成的任务。 –

完全有可能带有边框半径，但您必须使用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; 
}

赚：

enter image description here

亲身体验：

http://jsfiddle.net/9zamA/

来源

2012-12-25 22:44:13

** + 1 **优秀的CSS3解决方案！在另一个[**答案**]（http://stackoverflow.com/a/11218781/1195891）中使用**你的回答**和额外的代码产生这个新的[** jsFiddle **]（http：/ /jsfiddle.net/rfsLE/）。请注意，HTML内部内容旨在增强可访问性回退以显示图形箭头。干杯! – arttronics

很酷，谢谢！尽管我对子弹形的圆角没有兴趣。似乎我的初学者的头脑中，我们应该能够创建一个矩形的“容器”，其中包含一个包含按钮图例和相邻三角形的彩色矩形。 –

你可以使用CSS三角边境招：http://css-tricks.com/snippets/css/css-triangle/

您可以使用svg。

来源

2012-12-25 22:48:36 allyourcode

** - 1 **每个OP要求没有圆角或图像。 – arttronics

技术上，OP没有说图像和/或圆角是不允许的。唯一的要求是该按钮不是矩形的，并且与文本一起缩放。 – cimmanon

+1在cimmanon。此外，我的解决方案不提圆角或图像... – allyourcode

可扩展的非矩形CSS按钮？

回答

相关问题