創建半個圓按鈕與向內影子

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。希望這更多的是你所尋找的。順便說一句，你的真名是？