创建倾斜/不规则形状div

Question

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

我知道你可以使用边框来做this这样的事情，但无论如何都要像图片中那样获得边框（跨越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;
}

Fiddle

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>