Question

我试图让图像的底部指向。我试图通过在底部生成两个三角形来获得此效果。他们必须有回应。在网上搜索了大量不符合我要求的例子之后，这是迄今为止我设法制作的最佳例子。

＆＃13;

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%)
}

＆＃13;

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

＆＃13;

CodePen Demo

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

如果不是所有现代浏览器，我怎样才能生成平滑线？我不要求向后兼容性。

非常感谢任何帮助！

Answer 1

不幸的是，当我们使用有角度的linear-gradient图像时总会发生这种情况，目前克服这种行为的唯一方法似乎是避免硬停止的颜色（也就是说，不要＃39; t将一种颜色的停止点作为下一个颜色的起点。使第二种颜色从第一种颜色的停止点开始稍远一点会产生模糊区域并使其看起来更平滑。这仍然不是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 */
}

＆＃13;

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

＆＃13;

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

＆＃13;

替代实施：

剪辑路径：您也可以使用clip-path功能产生类似的效果。使用clip-path的优点是它既有响应又可以产生透明切割。 The SVG based clip-path has better browser support than the CSS version。但IE尚未支持此功能。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用calc(50% - 1px)

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

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

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

无任何模糊，只有光滑的边缘

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

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

2 个答案: