どのように私はCSSで背景の形を持つことができますか？

Question

私はtransformのcssプロパティでdivを使用してこのようなことを実現しました：skew（）;あなたが私に正しい方向への一歩を与えるか、私に挿入するのが最も簡単な方法についての詳細を言うことができるので、もし私が、それはラインが上がっている曲線の種類を持ってしたいと思いますしかし

応答SVGグラフィックアートに、具体的要素や、それをはるかに高く評価されると思い、ページ自体の背景

EDIT：ここで使用される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

あなたもlinear-gradient（再び）を使用することができ、実際には2と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

あなたは（また、余分なHTML要素の必要性を減らす）主な要素をSVGを使用せずに（のような::after）を擬似要素に変換または影響を与えるスキューを適用することができます。

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/