创建斜坡全宽css3

Question

我正在尝试使用 SVG 创建斜率/对角线（第一次，接受其他替代方案），但我遇到了很多问题。我的目标是：

• 创建一个全宽斜坡（准备好响应）
• 我想在 div 部分的顶部设置坡度，在底部设置其他部分
• 如果有 .svg 的替代方案，我会很高兴听到它

斜坡应该是这样的：

• 初始网页设计
• design mockup
• how the slope has to be

我不想使用.png，那样它会变得模糊，我想要尽可能完美。

Here's my test fiddle.

黄色部分，应该是有坡度的，在div/svg的底部或顶部。

有什么帮助吗？

HTML

<div>
       <svg width="100%" height="200">
       <rect xmlns="http://www.w3.org/2000/svg" transform="rotate(-3.39492 500.731 6.21164)" stroke-opacity="0" id="svg_2" height="55" width="100%" y="-1" x="-3" stroke="#000000" fill="#f0dc10"/>
       </svg>
    </div>

CSS

#svg_2{
    left: 0;
    top: 0;
    width: 100%;
    margin-top: 50px;
}

Answer 1

如果您对 CSS 解决方案持开放态度，您可以这样做：

在这里演示：http://jsfiddle.net/jme11/D9M2L/

CSS

body {
    background-color: #000;
    margin: 0px;
}
p {
    color: white;
}
section {
    position: relative;
    background: blue;
    color: #fff;
    text-align: center;
}
section:before {
    position: absolute;
    content:'';
}
section.diagonal {
    background: blue;
}
footer {
    position: relative;
    background: black;
    color: #fff;
    text-align: center;
}
footer:before {
    position: absolute;
    content:'';
}
footer.diagonal {
    background: black;
}
.diagonal {
    z-index: 1;
    padding: 3em;
}
.diagonal:before {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: 3% 0;
    transform-origin: 3% 0;
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
}

HTML：

<header>
    <p>Header</p>
</header>
<section class="diagonal">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</section>
<footer class="diagonal">
    <p>Footer</p>    
</footer>

如果您想支持 IE9，请为转换添加 ms- 前缀：http://caniuse.com/#search=transform