css – 背景图像,线性渐变锯齿状边缘结果需要平滑边缘

我试图让图像的底部指向.我试图通过在底部生成两个三角形来获得此效果.他们必须有回应.在搜索了整个互联网之后,有很多例子对我的要求不起作用,这是迄今为止我设法生产的最好的例子.

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,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度.

如果不是所有现代浏览器,如何在大多数现代浏览器中生成平滑线？我不是要求向后兼容性.

任何帮助是极大的赞赏！

解决方法

不幸的是,这总是发生在我们使用有角度的线性渐变图像时,目前克服这种行为的唯一方法似乎是避免颜色的硬停止(也就是说,不要将一种颜色的停止点作为开始点下一个).使第二种颜色从第一种颜色的停止点开始稍微远离会产生模糊区域并使其看起来更平滑.这仍然不是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,transparent 50%);  /* note the change of stop and start points */
}

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

替代实施：

剪辑路径：您还可以使用剪辑路径功能来产生类似的效果.使用剪辑路径的优点是它既响应又产生透明剪切. 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%,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>

css – 背景图像,线性渐变锯齿状边缘结果需要平滑边缘

解决方法

猜你在找的CSS相关文章