可擴展的非矩形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按鈕？

回答

相關問題