三角形块未拉伸全宽

Question

我有一个问题是在图像顶部创建一个长的尖三角形框，这样我就可以创建一个图像被略微切掉的效果。像这样：

我尝试使用以下CSS：

.overlay{
    background-image: linear-gradient(10deg, lightblue 50%, transparent 50%);   
    height: 165px;  
    width:100%;
}

在此处查看演示：CODEPEN

但是正如你在CodePen中看到的那样，蓝色方块没有拉伸到全宽。我不想应用像旋转和东西这样的方法。谁能引导我走向正确的方向？

Answer 1

您需要调整渐变度和百分比：

＆＃13;

＆＃13;

.fixedheight {
  height: 590px;
  background-image: url(http://www.kaylainthecity.com/wp-content/uploads/gym.jpg);
  background-size: cover;
  background-position: center;
  position: relATIVE;
}

.overlay {
  POSITION: ABSOLUTE;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(-3deg, lightblue 55%, transparent 56%);
  height: 165px;
  width: 100%;
}

＆＃13;

<div class="container-fluid">
  <div class="row fixedheight">
    <div class="pic"></div>
    <div class="overlay"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Updated Pen

Answer 2

这就是你想要的

.overlay{
    background-image: linear-gradient(-2deg, lightblue 45%, transparent 45%);   
    height: 165px;  
  width:100%;
  bottom: 0;
  position: absolute;
}

Codepen

亲切的问候