按鈕右邊有一個圓形的CSS三角形邊？

我試過在CSS中創建一個像這樣的按鈕，而按鈕的尖尖部分不是尖銳的？按鈕右邊有一個圓形的CSS三角形邊？

這裏是CSS：

.home_icon { width: 40px; height: 25px; margin-left:10px; margin-top:8px; background: #FFCC05 url(../images/home_icon.svg) no-repeat 12px 4px; -webkit-border-radius: 11px 5px 5px 11px/17px 5px 5px 17px; -moz-border-radius: 11px 5px 5px 11px/17px 5px 5px 17px; border-radius: 11px 5px 5px 11px/17px 5px 5px 17px;}

任何人都可以有一個解決方案？我準備改變CSS代碼，只要我有一個按鈕的左側的「等邊」三角形？

align top http://www.kerrydeaf.com/css.png

UPDATE： 這裏是我的jsfiddle：http://jsfiddle.net/alma/eBtY4/1/

來源

2012-11-10 Irishgirl

*您想*尖尖結束時*不太尖* ，或者它不夠尖*足夠*？你能分享一個[JS小提琴]（http://jsfiddle.net/），或類似的現場演示，以便我們可以看到你在使用什麼（HTML，CSS和實際圖像）？ –

像上面這樣，或類似是可以接受的。它不是或多或少尖銳。我有一個圖形例子，這應該足以說明我正在尋找什麼？ – Irishgirl

與上面相同 - http://jsfiddle.net/alma/eBtY4/1/ – Irishgirl

你可以嘗試這樣的事情

.home_icon 
{ 
width: 120px; 
height: 80px; 
background:red; 
position: relative; 
-moz-border-radius:0 10px 10px 0; 
-webkit-border-radius:0 10px 10px 0; 
border-radius:0 10px 10px 0; 
} 
.home_icon:before 
{ 
content:""; 
position:absolute; 
right: 100%; 
width: 0; 
height: 0; 
border-top: 40px solid transparent; 
border-right: 26px solid red; 
border-bottom: 40px solid transparent; 
}

來源

2012-11-10 12:42:18 freebird

試過了，這裏是http://jsfiddle.net/alma/eBtY4/2/它看起來很有趣？ – Irishgirl

@Irishgirl查看更新的小提琴http://jsfiddle.net/USezL/1/ – freebird

@Irishgirl它有幫助嗎？ – freebird

按鈕右邊有一個圓形的CSS三角形邊？

回答

相關問題