html - 如何在 div 的底部添加响应式三 Angular 形/倾斜？

Question

对于一个我刚刚被要求构建的元素，有几个 div 需要在底部与它们成一定 Angular (如提供的图像中所示)。请记住，这些 div 需要响应，我还需要能够动态设置颜色和不透明度(排除使用背景图像)，有人可以帮助我最好的方法吗？我试过弄乱边框，但这并不理想，因为你不能将 % 用于边框厚度/宽度，我试过使用 :after 和 transform:rotate(5deg) skew(5deg) 属性，但这是也非常理想，特别是当我需要 div 上的不透明度时，因为您可以看到叠加层。

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

Example

Answer 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