Html 创建带有向内阴影的半圆按钮

我正在尝试创建一个如下所示的按钮：

但我能做到的最接近的事情是：

以下是我创建的CSS：

body section div div.left-arrow
height:45px;
position:absolute;
width:58px;
margin: 0;
list-style: none;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
background:#efeeee;
-webkit-box-shadow: inset 0px 5px 53px -25px rgba(0,0,0,1),0px 10px 14px -0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 5px 53px -25px rgba(0,0,0,1),0px 10px 14px -0px rgba(0,0,0,0.75);
box-shadow: inset 0px 5px 53px -25px rgba(0,0,0,1),0px 10px 14px -0px rgba(0,0,0,0.75);
margin-left: 860px;
margin-top: 206px;
}

---

有人能告诉我如何使它看起来更像第一个吗？

我认为它没有按照你希望的方式工作，因为当你旋转一个对象时，CSS属性仍然被应用，就像对象没有旋转一样。所以，如果你不旋转半圆（这样做更有意义），我认为效果会更好。这是我用过的

.arrow {
    background: #efeeee;
    height: 45px;
    position: relative;
    width: 40px;
    margin: 50px;
    border-radius: 0 90px 90px 0;
    box-shadow: inset 4px 0px 6px 0px rgba(0,0,0,.4);
}

---

我试图简化代码，因此删除了-moz，-webkit代码，您可以将其添加回。希望这更多的是你正在寻找的。顺便说一句，那是你的真名吗？

看起来比我做的好多了，谢谢。不，那显然不是我的真名。@GilbertBoner再加上一些阴影，它可以看得更近些，或者@GilbertBoner哈哈，好吧，很公平。很高兴我能帮助你