如何在 div 的底部添加响应式三角形/倾斜？答案

【问题标题】：How can I add a responsive triangle/slant at the bottom of a div?如何在 div 的底部添加响应式三角形/倾斜？
【发布时间】：2017-08-03 10:25:34
【问题描述】：

对于我刚刚获得构建的项目，有几个 div 需要在底部与它们有一个角度（例如在提供的图像中）。请记住，这些 div 需要响应，我还需要能够动态设置颜色和不透明度（使用背景图像排除）有人可以帮助我以最好的方式做到这一点吗？我试过弄乱边框，但这并不理想，因为你不能使用 %'s 来表示边框的厚度/宽度，我试过使用 :after 和 transform:rotate(5deg) skew(5deg) 属性，但这是' 也不理想，特别是当我需要 div 上的不透明度时，你可以看到覆盖。

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

Example

【问题讨论】：

请在此处添加您的代码以便修改
指南上的几个链接：1) codepen.io/ahmadnassri/post/non-rectangular-headers-part-1 2) sarasoueidan.com/blog/css-shapes

标签： html css sass frontend

【解决方案1】：

你可以使用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

【讨论】：

【解决方案2】：

您可以使用线性渐变：

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

&lt;div class="bg"&gt;Content&lt;/div&gt;

【讨论】：

【解决方案3】：

* { 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>

【讨论】：