Question

对于我刚刚建立的项目，有几个div需要在底部与它们成一个角度（例如在提供的图像中）。请记住这些div需要响应，我还需要能够动态设置颜色和不透明度（排除使用背景图像）任何人都可以帮助我做最好的方法吗？我已经尝试过使用边框，但这并不理想，因为你不能使用％的边框厚度/宽度而且我尝试过使用：使用变换后：旋转（5deg））skew（5deg）属性，但这并不理想，特别是当我需要div上的不透明度时，你可以看到叠加。

如果有人知道这样做的好方法，请随时提出建议。谢谢你的帮助： - ）

Example

Answer 1

您可以使用线性渐变：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 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>

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

3 个答案: