css - 右侧有圆形按钮的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代码了吗？

_{（来源：kerrydeaf.com）}

更新： 这是我的 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;
}