html - 创建倾斜/不规则形状的 div

Question

我想知道是否可以使用 CSS3 创建这种类型的 div 形状。

我知道您可以使用边框来执行诸如此类的操作，但是无论如何，是否可以像图像中那样获得边框（跨越 div 的整个顶部和底部） - 并且为了获得奖励积分，它可以响应地做到这一点（ % 宽度？）

.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid white;
}

任何链接，小提琴，建议将不胜感激。

Answer 1

正如我的评论中提到的，我创建了一个倾斜的三角形（如果你删除填充 CSS，你会看到），然后添加填充，这样你就看不到三角形的尖端

.cornered {
    width: 160px;
    height: 0px;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 280px solid blue;
    padding:60px;
}

小提琴

Answer 2

你可以这样做

css

.irregular-shape {
            border-left: 1500px solid black;

            padding: 50px;
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent;
        }

标记

<div class="irregular-shape"></div>