按钮右边有一个圆形的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三角形边？

回答

相关问题