html - 创建具有向内阴影的半圆形按钮

Question

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

但我设法做的最接近的事情看起来像这样: This

这是我创建的 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;
}

谁能告诉我如何让它看起来更像第一个？

Answer 1

我认为它无法按照您希望的方式工作，因为当您旋转对象时，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 代码，您可以将其重新添加进去。You can see a js.fiddle here .希望这就是您正在寻找的更多内容。顺便说一句，这是你的真名吗？