右边有一个圆形按钮的CSS三角形边？

Question

我试图在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

更新 这是我的jsfiddle：http://jsfiddle.net/alma/eBtY4/1/

Answer 1

你可以尝试这样的事吗

.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;
}