从内侧绕箭头

Question

我使用CSS创建了以下箭头,但我的箭头内侧没有圆角.有没有办法做到这一点？

#arrow {
    border-right:30px solid black;
    border-bottom:30px solid black;
    width:100px;
    height:100px;
    transform: rotate(-45deg);
    margin-top:40px;
    border-radius: 1em;
    -webkit-border-radius: 1em;
-moz-border-radius: 1em;
}

<div id="arrow"></div>

Answer 1

请尝试使用:before和:after选择器.小提琴:http://jsfiddle.net/gopal/tvfujcLp/1/

#arrow {
    width:130px;
    height:130px;
    transform: rotate(-45deg);
    margin-top:40px;
    position:relative;
}

#arrow:after, #arrow:before {
    content:'';
    display:block;
    height:30px;
    width:100%;
    position:absolute;
    background:black;
    bottom:0;
    border-radius:1em;
}
#arrow:after {
    right:0;
    width:30px;
    height:100%;
}

<div id="arrow"></div>