Создание половины кнопок круга с внутренней тенью

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. Надеюсь, это больше того, что вы ищете. Кстати, это ваше настоящее имя?