三角形块没有拉伸全宽

我有一个问题，在图像的顶部创建一个长的尖锐三角形框，以便创建一个图像被略微切断的效果。就像这样：三角形块没有拉伸全宽

我使用下面的CSS尝试：

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

观看演示在这里：CODEPEN

但你可以在蓝方没有延伸到CodePen内看到全屏宽度。我不想应用旋转和东西等方法。任何人都可以引导我进入正确的方向吗？

来源

2017-03-03 Rotan075

这是你想要的吗？ http://codepen.io/anon/pen/peyYVq –

@ElmerDantas是的！完善。谢谢！在您的解决方案，然后我可以接受为答案 – Rotan075

请在问题本身[mcve]中提供所有相关代码，而不是在第三方网站上。 –

这里

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

Codepen

亲切的问候

来源

2017-03-03 15:48:40

你需要玩的度量和你的梯度百分比：你想要什么

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

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

Updated Pen

来源

2017-03-03 15:41:33 Pete

三角形块没有拉伸全宽

回答

相关问题