Question

我想知道，最好的方法（使用html，css和图形）创建一个网页，其顶部标题部分看起来是斜面的，而不是直接穿过？请参阅下图作为示例：

alt text

我不确定如何以某种方式使用图像，以便根据不同的浏览器尺寸/分辨率进行扩展/收缩......

有人可以给我一些帮助吗？或者也许把我指向一个资源？

谢谢！

Answer 1

您可以使用border-radius。

Example

See my example on jsFiddle

Answer 2

我是@ Alex的清洁版：

Live Demo

＆＃13;

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

＆＃13;

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

＆＃13;

显然它不会在IE中工作。

Answer 3

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

Answer 4

这是一个跨浏览器版本，我是在jquery的帮助下完成的。基本上，脚本会创建许多跨度，白色背景和宽度递减。

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

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

alt text

您可以找到整个代码（Fiddle上的html + css）

Answer 5

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

使用比元素本身大width和height的伪元素绘制叠加层。
应用border-radius创建圆形效果和background-color。
在父级上添加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>

帮助创建具有弯曲标题部分的HTML页面

5 个答案: