我怎樣纔能有CSS的背景形狀？

我使用div的css屬性transform：skew（）;我怎樣纔能有CSS的背景形狀？

，但是我想它有怎樣的曲線，其中線是往上走的，所以如果你能給我朝着正確的方向邁出的一步，或告訴我有關將最簡單的方法一個響應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; 
}

來源

2016-04-26 Eliecer Thoms

你能分享這塊神奇的形狀看起來像一個屏幕截圖？ – Aziz

我們從你嘗試過的東西開始，我們可以看到你爲創造這個目標所做的努力嗎？ –

Power Exterminator：探索頻道上的新電視節目！ ; P –

你也可以使用一個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

來源

2016-04-26 19:48:30

哇！生病的傢伙 –

您可以將歪斜變換，僞元素（如::after），而不使用SVG或影響的主要元素（也減少了額外的HTML元素的需要）：

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/

來源

2016-04-26 19:24:51 Aziz

看起來更好，非常感謝 –

我怎樣纔能有CSS的背景形狀？

回答

相關問題