Site banner design with half circle: HTML5 ?

[Bob Brunius]

From a graphics designer I got the following design suggestion: https://oiyc.org/images/headerWithHalfCircle.jpg

It’s a horizontal banner about 100px in height across the top of the page. In the middle a half circle descends below the banner to allow room for the logo. I’m not sure how to implement this. Could go with with a css banner with a photo of the half circle pasted to the underside but that would complicate any drop shadowing.

Or, can it be completely implemented with HTML5 constructs? How to go about it? Questions about browser compatibility comes up.

Any thoughts?
Thanks

[Shikkediel]

Shouldn’t be too difficult, something like this for example.

codepen.io/anon/pen/XOEEOZ

[Bob Brunius]

WOW! So simple and perfect. Didn’t think to use a border radius. Thanks!

[Shikkediel]

No problem, I’ve made a minor update because I noticed I used a after pseudo element. When more elements are added to the parent, a before element makes more sense.

[Bob Brunius]

How does the absolute positioned 150px box get centered when the top: and left: are set to zero?

I’m lost…

[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);
}


[Shikkediel]

I’m lost…

Don’t think about the why on that one, it’s just one of those things that happens to work because of how the W3 spec is defined – using margin: auto is essential there too. But you could also take another approach to center it.

I think you solved the cropping issue…

Box-shadow I figured would be tricky, I’ll have to take another look at that one.

Edit – first attempt

Also a second attempt, where the circle is a separate div and the pseudo used for the shadow.

[Author]

Posts