右侧带有圆形按钮的 CSS 三 Angular 形边？

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

谁能有解决办法？只要我有一个按钮的尖端(在左侧)的“等边”三 Angular 形，我就准备好更改 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;
}