Help Creating Html Page With Curved Header Section

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 se

Solution 1:

You could use border-radius.

See my example on jsFiddle.

Solution 2:

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
}

<divclass="head"></div>

It obviously won't work in IE.

Solution 3:

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.

Solution 4:

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

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

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

Solution 5:

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%00;
  position: absolute;
  background: white;
  bottom: -200px;
  right: -200px;
  left: -200px;
  content: '';
  top: 0;
}

<divclass="box"></div>