 <p>I think its not working they way you want it to because when you rotate an object the CSS properties are still applied as if the object was not rotated. So if you make the half circle without the rotating it (which makes more sense to do it this way) i think the effect works better. Here's what I used.</p> <pre><code>.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); } </code></pre> <p>I tried to simplify the code so i removed the -moz, -webkit code which you can add back in. <a href="https://jsfiddle.net/ss1bocpy/1/" rel="nofollow">You can see a js.fiddle here</a>. Hope thats more of what you are a looking for. BTW is that your real name?</p>