Create slope full width css3

Question

I'm trying to create a slope/diagonal with SVG (first time, other alternatives accepted) and im having a lot of issues with it. My goal is:

Create a full width slope (ready for responsive)
I want to have the slope on top of a div section and other on bottom
if there is an alternative, to .svg, i would be glad to hear it

This is how the slopes, should look like:

I don't want to use an .png, then it will blur and I want as perfect as possible.

Here's my test fiddle.

The yellow part, should be the one with slope, on bottom or top of the div/svg.

Any help?

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;
}

does it have to be svg? could you tilt a div or pseudoelement? — Jason, Jun 21 '14 at 01:40
Could be something else, as it has full width and it is a slope. — uniqezor, Jun 21 '14 at 01:57
You could do something in css then like this: http://jsfiddle.net/jme11/D9M2L/ — jme11, Jun 21 '14 at 02:13

score 7 · Accepted Answer · answered Jun 21 '14 at 02:19

If you're open to a css solution you could do something like this:

Demo here: 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>

If you want support for IE9 add the ms- prefix for the transform: http://caniuse.com/#search=transform

Thank you, it helped me a lot :) – Atif Saleem Oct 23 '20 at 18:05 — Atif Saleem, Oct 23 '20 at 18:05

Create slope full width css3

1 Answers1

Linked

Related