在div底端半圆？

Question

I need a semi-circle for the bottom border of a div (not rounded corners), like this.

This is the div code:

#navlogo img {
position:fixed;
width: 180px;
height: 180px;
z-index: 2;
left:45%;
top:0;
background-color:#CCC;

Any help is greatly appreciated!

border-radius does the trick, sorry for not wording it better

Answer 1

You'll need border-bottom-left-radius: 50% and border-bottom-right-radius: 50%; .

jsFiddle: https://jsfiddle.net/ufar4mrj/

Answer 2

As far as I know, there are only few ways to include rounded shapes in a webpage:

• border-radius (rounded corners)
• images
• SVG
• Flash

Considering what you want to do, SVG and Flash are out of question, leaving only images and rounded corners to you. I don't know why you refuse to use border-radius because it works very well. You won't find anything that integrates better into a webpage.