Wie kann ich Hintergrundformen mit CSS haben?

Question

Ich habe so etwas mit einem div mit der CSS-Eigenschaft von transform erreicht: skew();

jedoch würde Ich mag es ein bisschen eine Kurve haben, wo die Linie nach oben geht, also wenn Sie mich einen Schritt in die richtige Richtung geben könnte oder sagen Sie mir mehr über die einfachsten Möglichkeiten des Einsetzens eine ansprechende svg der grafischen Kunst, um speziell die Hintergrund der Elemente oder der Seite selbst würde es viel

EDIT geschätzt werden: Hier ist das verwendete CSS

.skewed-bg{ 
    background: #830024; 
    -webkit-transform: skew(0deg, -9deg); 
    transform: skew(0deg, -9deg); 
    margin-top: -200px; 
} 
.skewed-bg .container{ 
    -webkit-transform: skew(0deg, 9deg); 
    transform: skew(0deg, 9deg); 
    padding-top: 200px; 
    color: white; 
} 

Answer 1

Sie können auch ein linear-gradient (wieder) verwenden, eigentlich 2 und background-size

body { 
 
    width: 80%;/* whatever , can be a fixed width , basicly to show behavior on resize */ 
 
    margin: auto; 
 
} 
 
body>div { 
 
    background: 
 
    linear-gradient(to bottom right, #830024 50%, transparent 50.5%) no-repeat bottom, 
 
    /* bottom part */ 
 
    linear-gradient(0deg, #830024, #830024) no-repeat top; 
 
    /* top portion */ 
 
    color: white; 
 
    padding-bottom: 3em; 
 
    background-size: 100% 7em, 100% calc(100% - 7em) 
 
}

<div> 
 
    <h1>HTML Ipsum Presents</h1> 
 

 
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris 
 
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis 
 
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> 
 

 
    <h2>Header Level 2</h2> 
 
</div> 
 
<ol> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
</ol>

codepen to play with

Answer 2

Sie können sich bewerben, die Skew-Transformation auf ein Pseudoelement (wie ::after) ohne SVG oder das Hauptelement beeinflussen (auch die Notwendigkeit für zusätzliche HTML-Element zu reduzieren):

header { 
 
    background: #CCC; 
 
    padding: 2em; 
 
} 
 

 
.skewed-bg { 
 
    background: #830024; 
 
    color: #FFF; 
 
    padding: 2em; 
 
    position: relative; 
 
    min-height:300px; 
 
    overflow:hidden; 
 
} 
 
.skewed-bg::after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: -75%; left: 0; right: 0; 
 
    height:100%; 
 
    background:#FFF; 
 
    transform: skew(0deg, -9deg); 
 
}

<header>Power</header> 
 
<div class="skewed-bg"> 
 
    Quienes Somos. 
 
</div>

jsFiddle: https://jsfiddle.net/w6690acn/1/