右边是圆形的按钮的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代码，只要我有一个按钮的尖（在左边）的“等边”三角形

（来源：）

更新：

---

这是我的jsfiddle:

你能试试这样的吗

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

---

你能试试这样的吗

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

---

你想让尖头的一端不那么尖，还是不够尖？你能分享一个或类似的现场演示，让我们看看你在用什么（HTML、CSS和实际图像）？如上所述，或者类似的是可以接受的。这并不是说多少有意义。我有一个图形示例，这应该足以/自解释我在寻找什么？与上面的示例相同-您希望尖端不那么尖，还是不够尖？你能分享一个或类似的现场演示，让我们看看你在用什么（HTML、CSS和实际图像）？如上所述，或者类似的是可以接受的。这并不是说多少有意义。我有一个图形示例，这应该足以/自解释我在寻找什么？与上面相同-这太棒了，这就是我在寻找的。是否可能有宽度：40px；高度：25px；作为一个选项？这里是一个更新的jsfiddle.net/alma/USezL/3，黄色是完美的。我尝试过悬停青色，但它在三角形部分不起作用？我已经更新了jsiddles，如上所述。我在三角形部分没有青色悬停？太棒了，这就是我要找的。是否可能有宽度：40px；高度：25px；作为一个选项？这里是一个更新的jsfiddle.net/alma/USezL/3，黄色是完美的。我尝试过悬停青色，但它在三角形部分不起作用？我已经更新了jsiddles，如上所述。我没有运气让青色在三角形上盘旋？