創建一個具有斜邊的div（Html，Css）

-2

我想創建一個在正常和傾斜的內容底部具有邊緣的div或節。結果應該是這樣的： http://themeforest.net/item/delicious-responsive-app-landing-html-theme/full_screen_preview/7965552 有人可以幫助我嗎？創建一個具有斜邊的div（Html，Css）

來源

2014-07-21 user3425988

我們需要你有有效回答的代碼。 –

您給出的示例使用具有透明背景的圖像。

這是可能的CSS。

JSFiddle

HTML：

<div></div>

CSS：

div { 
    height:200px; 
    width:1000px; 
    background:indianred; 
    margin-top:250px; 
    position:relative; 
} 

div::before { 
    content:''; 
    position:absolute; 
    width: 0; 
    height: 0; 
    border-bottom: 100px solid indianred; 
    border-left: 1000px solid transparent; 
    top:-100px; 
} 

div::after { 
    content:''; 
    position:absolute; 
    width: 0; 
    height: 0; 
    border-top: 100px solid indianred; 
    border-right: 1000px solid transparent; 
    bottom:-100px; 
}

如果你想瀏覽器的兼容性，你必須堅持與圖像的方法。

來源

2014-07-21 10:15:47 Albzi

我在osx上最新的chrome上，圖片中沒有斜角。 – Donato

因此，我最後的評論，「如果你想瀏覽器的兼容性，你必須堅持使用圖像方法。它不適用於所有瀏覽器。對不起。 @DanStayntouch – Albzi

你可以使用一個後臺招：

<div class="div1"> 
    content 1 
</div> 
<div> content 2</div> 


.div1 { 
    background: linear-gradient(352deg, transparent 125px, #c00 0) bottom right;}

檢查此琴：http://jsfiddle.net/2f7Ds/

來源

2014-07-21 10:22:03 Luciano

改編自這個問題：http://stackoverflow.com/questions/10349867/how-do-i-bevel-the-corners-of-an-element – Luciano

創建一個具有斜邊的div（Html，Css）

回答

相關問題