html - 帮助创建带有弯曲标题部分的 HTML 页面

Question

我想知道，创建一个顶部标题部分似乎是斜面的网页的最佳方法是什么（使用 html、css 和图形），而不是直接交叉？请参阅下图作为示例：

我不确定如何使用图像以使它们根据不同的浏览器尺寸/分辨率进行扩展/收缩...

谁能给我一些帮助？或者也许指向我一个资源？

谢谢！

Answer 1

你可以使用border-radius.

请参阅我在 jsFiddle 上的示例。

Answer 2

我的是@Alex 的更简洁的版本：

现场演示

.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>

它显然不会在 IE 中工作。

Answer 3

您可以使用 CSS3 或特定于 webkit 的属性，但就跨浏览器兼容性而言，这并没有得到很好的支持。如果您想支持尽可能多的浏览器，最好的办法是使用背景图片来实现此效果。

Answer 4

这是我在 jquery 的帮助下制作的跨浏览器版本。基本上，该脚本创建了许多跨度，具有白色背景和逐渐减小的宽度。

您可以使用STEPS和FACTOR变量，这将改变结果。step 函数设置曲线的缓动。你可以稍后用比我更好的功能替换它，这只是一个例子。

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

你可以找到整个代码（html + css on the Fiddle）

Answer 5

这是实现这一目标的另一种方法。

1. width使用大于或height大于元素本身的伪元素绘制叠加层。
2. 适用border-radius于创建圆形效果和background-color。
3. 添加overflow: hidden父项以隐藏多余的部分。

输出图像：

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>