当前位置：文江博客话题详情

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

发布于 2024-10-14 01:07:17 字数 237 浏览 2 评论 0原文

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

alt text

我不确定如何使用图像，以便它们会根据不同的浏览器大小/分辨率扩展/收缩...

任何人都可以为我提供一些帮助吗？或者也许给我指出一个资源？

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半夏半凉 2024-10-21 01:07:17

我的是 @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 中不起作用。

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.

回复收藏 0 原文

囍笑 2024-10-21 01:07:17

您可以使用border-radius。

查看我的jsFiddle 上的示例。

回复收藏 0 原文

人间☆小暴躁 2024-10-21 01:07:17

这是一个跨浏览器版本，是我在 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

您可以在小提琴)

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

alt text

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

回复收藏 0 原文

风吹雨成花 2024-10-21 01:07:17

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

回复收藏 0 原文

你穿错了嫁妆 2024-10-21 01:07:17

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

使用伪元素绘制一个覆盖层，其宽度和高度大于元素本身。
应用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>

Here is another way of achieving this.

Draw an overlay with pseudo element with width and height larger than element itself.
Apply border-radius to create round effect and background-color.
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;
}