背景图像，锯齿状边结果线性梯度需要被平滑边缘背景图像，锯齿状边结果线性梯度需要被平滑边缘(backg

我试图使图像的底部指出。我试图通过在底部产生两个三角形来获得这种效果。他们必须响应。并用了很多不为我的要求来使用，例如搜索所有在互联网上后，这是最好的，到目前为止我已经成功地生产。

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

它的工作原理正是我想要它，因为它是响应而不需要媒体查询。但对三角线不是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-path功能也产生类似的效果。使用的优点clip-path是，它是都响应，并且还产生一个透明切口。基于SVG clip-path具有更好的浏览器支持比CSS版本。这还不支持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:

刚刚发现使用codepen出奇好的解决方法calc(50% - 1px)

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

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

没有任何模糊，只是一个边缘光滑

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