Help creating HTML page with curved header section

Question

I was wondering, what is the best way (using html, css, and graphics) to create a web page whose top header section appears to be beveled, as opposed to straight across? Please see the below image as an example:

I'm not sure how to use images in a way such that they would expand/contract in accordance with different browser sizes/resolutions...

Can anyone offer me some help? Or perhaps point me to a resource?

Thanks!

Answer 1

Mine is a cleaner version of @Alex's:

Live Demo

.head {
    -webkit-border-top-left-radius: 40% 80px;
    -webkit-border-top-right-radius: 40% 80px;
    -moz-border-radius-topleft: 40% 80px;
    -moz-border-radius-topright: 40% 80px;
    border-top-left-radius: 40% 80px;
    border-top-right-radius: 40% 80px;

    background: blue;
    height: 280px
}

<div class="head"></div>

It obviously won't work in IE.

Answer 2

Here's a cross-browser version, which i made with help of jquery. Basically, the script creates many spans, with white background and decreasing width.

You can play around with STEPS and FACTOR variables, which will change the result. The step function sets the easing of the curve. You may replace it later with better functions than mine, it's just an example.

var STEPS = 53;
var FACTOR = 5;

var $el = $('div.header');
var width = $el.outerWidth();
var $span = $('<span></span>');
for(i=0;i<STEPS;i++){
    tmpWidth = stepWidth(i, width);
    $span.clone().css({
        'bottom': i + 'px',
        'width': tmpWidth,
        'left': (width - tmpWidth)/2
    }).appendTo($el);

}
function stepWidth(i, width){
    return -(1 / FACTOR * Math.pow(i, 2)) + width;
}

You can find the entire code (html + css on the Fiddle)

Answer 3

Here is another way of achieving this.

1. Draw an overlay with pseudo element with width and height larger than element itself.
2. Apply border-radius to create round effect and background-color.
3. Add overflow: hidden on parent to hide excess part.

Output Image:

body {
  background: linear-gradient(lightblue, blue);
  min-height: 100vh;
  margin: 0;
}

.box {
  position: relative;
  margin: 5vh auto;
  overflow: hidden;
  height: 90vh;
  width: 500px;
}

.box:before {
  border-radius: 100% 100% 0 0;
  position: absolute;
  background: white;
  bottom: -200px;
  right: -200px;
  left: -200px;
  content: '';
  top: 0;
}

<div class="box">
  
</div>

Answer 4

You could use CSS3 or webkit-specific properties, but this is not well supported as far as cross-browser compatibility is concerned. If you want to support as many browsers as possible, your best bet would be to use a background image to achieve this effect.

Answer 5

You could use border-radius.

See my example on jsFiddle.