css - 背景图片，线性渐变锯齿状边缘结果需要平滑边缘

Question

我正在尝试使图像的底部变尖。我试图通过在底部制作两个三 Angular 形来获得这种效果。他们必须有反应。在整个互联网上搜索了很多不符合我要求的示例之后，这是迄今为止我设法制作的最好的示例。

body,
html {
  height: 100%
}
.image {
  width: 1410px;
  margin-right: auto;
  margin-left: auto;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.pointer {
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.triangleWrapper {
  width: 50%;
  height: 50px;
  float: left;
}
.lefttriangle {
  width: 100%;
  height: 10px;
  left: 0px;
  top: 0px;
  background-image: linear-gradient(to right top, #ffffff 50%, transparent 50%);
}
.righttriangle {
  width: 100%;
  height: 10px;
  right: 0px;
  top: 0px;
  background: linear-gradient(to left top, #ffffff 50%, transparent 50%)
}

<div class="image">
  <img src="http://placekitten.com/1410/500">
  <div class="pointer">
    <div class="triangleWrapper">
      <div style="height: 100%;" class="lefttriangle"></div>
    </div>
    <div class="triangleWrapper">
      <div style="height: 100%;" class="righttriangle"></div>
    </div>
  </div>
</div>

CodePen Demo

它的工作方式完全符合我的要求，因为它无需媒体查询即可响应。但是它在三 Angular 形线上有一个不是 90 度的锯齿状边缘。

我如何才能在大多数(如果不是所有)现代浏览器中生成平滑的线条？我不是要求向后兼容。

非常感谢任何帮助!

Answer 1

不幸的是，当我们使用倾斜的 linear-gradient 图像时，这种情况总是会发生，目前克服这种行为的唯一方法似乎是避免颜色的硬停止 (也就是说，不要将一种颜色的停止点作为下一种颜色的起点)。使第二种颜色的起点距离第一种颜色的停止点稍远会产生模糊区域并使其看起来更平滑。这仍然不是 100% 完美，但比锯齿状边缘要好。

.lefttriangle {
  width: 100%;
  height: 10px;
  left: 0px;
  top: 0px;
  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%); /* note the change of stop and start points */
}
.righttriangle {
  width: 100%;
  height: 10px;
  right: 0px;
  top: 0px;
  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);  /* note the change of stop and start points */
}

body,
html {
  height: 100%
}
.image {
  width: 1410px;
  margin-right: auto;
  margin-left: auto;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.pointer {
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.triangleWrapper {
  width: 50%;
  height: 50px;
  float: left;
}
.lefttriangle {
  width: 100%;
  height: 10px;
  left: 0px;
  top: 0px;
  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);
}
.righttriangle {
  width: 100%;
  height: 10px;
  right: 0px;
  top: 0px;
  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);
}

<div class="image">
  <img src="http://placekitten.com/1410/500">
  <div class="pointer">
    <div class="triangleWrapper">
      <div style="height: 100%;" class="lefttriangle"></div>
    </div>
    <div class="triangleWrapper">
      <div style="height: 100%;" class="righttriangle"></div>
    </div>
  </div>
</div>

---

替代实现:

Clip Paths:您也可以使用clip-path 功能来产生类似的效果。使用 clip-path 的优点是它既响应又产生透明剪切。 The SVG based clip-path has better browser support than the CSS version .不过，IE 尚不支持此功能。

body,
html {
  height: 100%
}
.image {
  width: 1410px;
  margin-right: auto;
  margin-left: auto;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.css-clip {
  -webkit-clip-path: polygon(0% 0%, 0% 90%, 50% 100%, 100% 90%, 100% 0%);
  clip-path: polygon(0% 0%, 0% 90%, 50% 100%, 100% 90%, 100% 0%);
}
.svg-clip {
  -webkit-clip-path: url(#clipper);
  -moz-clip-path: url(#clipper);
  clip-path: url(#clipper);
}

<!-- CSS Clip-path - Lower browser support -->
<div class="image css-clip">
  <img src="http://placekitten.com/1410/500">
</div>

<!-- SVG Clip-path - Better browser support -->

<svg width="0" height="0">
  <defs>
    <clipPath clipPathUnits="objectBoundingBox" id="clipper">
      <path d="M0,0 0,0.9 0.5,1 1,0.9 1,0z" />
    </clipPath>
  </defs>
</svg>
<div class="image svg-clip">
  <img src="http://placekitten.com/1410/500">
</div>

使用 CSS 转换:您也可以尝试使用 this answer 中提到的方法.它在左侧实现了尖锐的效果，但应该很容易调整它以在底部创建尖锐的效果。

body,
html {
  height: 100%
}
.image {
  width: 1410px;
  margin-right: auto;
  margin-left: auto;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.top-container,
.bottom-container {
  position: absolute;
  bottom: 0px;
  height: 100%;
  width: 50%;
  overflow: hidden;
  backface-visibility: hidden;
}
.top-container {
  left: 0px;
  transform-origin: right bottom;
  transform: skewY(10deg);
}
.bottom-container {
  right: 0px;
  transform-origin: left bottom;
  transform: skewY(-10deg);
  background-position: 0% 100%;
}
.top-container:after,
.bottom-container:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  bottom: -62px;  /* tan(10) * (width/2) / 2 */
  background: url(http://placekitten.com/1410/500);
  background-size: 200% 100%;
}
.top-container:after {
  left: 0px;
  transform: skewY(-10deg);
}
.bottom-container:after {
  right: 0px;
  transform: skewY(10deg);
  background-position: 100% 0%;
}

<div class="image">
  <div class='top-container'></div>
  <div class='bottom-container'></div>
</div>