Reply To: Site banner design with half circle: HTML5 ?

[Bob Brunius]

Have a look: http://new.oiyc.org

One problem is my burgee that I sat in the ::before is getting cropped. Can’t figure out how to stop that. Also, I was hoping to put a drop shadow on the whole lower edge thing but not having any luck with that either.


#menus{height: 100px;
position: relative;
background: white;
box-shadow: 0 10px 20px rgba(0,0,0, 0.5);
}

#menus::before{
z-index:10000;
content: "";
width: 180px;
height: 180px;
position: absolute;
overflow: visible;
left: 0;
right: 0;
top: 10px;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
background: white;
margin: auto;
background-image: url("http://new.oiyc.org/Common/pageImages/OIYC_burgee_warp_small.png");
background-repeat: no-repeat;
background-size:180px;
background-position: 27px 10px;
box-shadow: 0 10px 20px rgba(0,0,0, 0.5);
}