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

Question

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

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

它的工作方式完全符合我的要求，因为它无需媒体查询即可响应。但是它在三角形线上有一个不是 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转换：您也可以尝试使用中提到的方法。它在左侧实现了尖锐的效果，但应该很容易调整它以在底部创建尖锐的效果。

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>

Answer 2

刚刚使用 calc(50% - 1px)

在 codepen 上找到了一个非常好的解决方案

https://codepen.io/hellonico/pen/xEYXmL

background: linear-gradient(7deg, currentColor calc(50% - 1px), transparent 50%);

没有任何模糊，只有平滑的边缘

编辑：.. 显然不是在 Safari 中？..

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

background image, linear gradient jagged edged result needs to be smooth edged

css

linear-gradients

responsive-design

css-shapes