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