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。希望更多的是你在寻找什么。 BTW是你的真名吗？

用向内阴影创建半圆形按钮

1 个答案: