如何在div底部添加响应三角形/斜面？

对于我刚刚建立的项目，有几个div需要在底部与他们形成一个角度（例如在提供的图像中）。考虑到这些div需要响应，我还需要能够动态地设置颜色和不透明度（使用背景图像排除），任何人都可以以最好的方式来协助我吗？我试过用边框搞乱，但这并不理想，因为你不能使用％的边框厚度/宽度，我试过使用：后与变换：旋转（5deg）歪斜（5deg）属性，但这wasn特别是当我需要不透明度的div时，你可以看到覆盖图。如何在div底部添加响应三角形/斜面？

如果有人知道这样做的好方法，请随时提出建议。感谢您的帮助:-)

Example

来源

2017-08-03 Lewis Cains

请点击这里添加我们的代码，以便它可以在导游修改 –

几个环节：1）https://codepen.io/ahmadnassri/post/non-rectangular-headers-part-1 2）ht tps：//www.sarasoueidan.com/blog/css-shapes/ – Sergej

您可以使用background:linear-gradient();财产

CSS

.demo{ 
    height:200px; 
    background: linear-gradient(-186deg,#ffa303 50%,transparent 10%); 
    color:#fff; 
}

HTML

<div class="demo"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam iusto ad excepturi at iste ipsa nulla ipsum earum, enim possimus ab, modi perspiciatis fugit eaque accusantium atque repellat blanditiis praesentium. 
</div>

Link for reference

来源

2017-08-03 10:39:56

非常感谢。这正是我所需要的:-) –

@LewisCains酷..风格相应...快乐编码 –

* { box-sizing: border-box; } 
 
.triangle-box { 
 
    position: relative; 
 
    max-width: 200px; 
 
    width: 100%; 
 
    margin: 30px; 
 
    padding: 20px; 
 
    background-color: rgba(255, 165, 0, .5); 
 
} 
 
.triangle-box:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: -50px; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: rgba(255, 165, 0, .5); 
 
    -webkit-clip-path: polygon(100% 0, 0 0, 0 50%); 
 
    clip-path: polygon(100% 0, 0 0, 0 50%); 
 
} 
 
.triangle-box p { 
 
    margin: 0; 
 
}

<div class="triangle-box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec elementum sem. Suspendisse bibendum ac massa eu faucibus.</p> 
 
</div>

来源

2017-08-03 10:35:56

可以使用线性渐变：

background: linear-gradient(175deg, rgba(241, 143,41, 0.7) 84.9%, transparent 85%), url(http://lorempixel.com/400/200) no-repeat;

.bg { 
 
    width: 80vw; 
 
    height: 80vw; 
 
    background: linear-gradient(172deg, rgba(241, 143,41, 0.7) 84.9%, transparent 85%), url(http://lorempixel.com/400/200) no-repeat; 
 
    background-size: cover; 
 
}

<div class="bg">Content</div>

来源

2017-08-03 10:38:43

如何在div底部添加响应三角形/斜面？

回答

相关问题