创建一个具有斜边的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）

回答

相关问题