带波形的带角度的全宽背景？

Question

有人能告诉我处理全角度背景的最佳方法是什么？

我想创建这样的东西：

我尝试使用:after选择器，但它没有按照我想要的方式工作。

.bg {
    background: #000;
}

.bg:after {
    content:"";
    height: 469px;
    background: url("http://i.imgur.com/SqqtkYk.png");
    display: block;
}

JSFiddle

Answer 1

首先，您必须提供body, html{margin:0;padding:0}并为position提供一些width:100%。见 DEMO 。

body, html{margin:0; padding:0;}
.bg {
    background: #000;
}

.bg:after {
    content:"";
    height: 469px;
    position:absolute;
    top:0;
    left:0;
    background: url("http://i.imgur.com/SqqtkYk.png");
    display: block;
    width:100%;
}