Question

我有4个div作为我的背景颜色，我想像这样倾斜的底部边框：这个：http://onepagelove.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/opl-big36.jpg

这是我的代码：

<html>
<head>
<style>
html, body { height: 200%; padding: 0; margin: 0; }


#first {
top: 0;
background-color: orange;
 height: 50%;
}

#second {
bottom: 0;
background-color: green;
 height: 50%;
}

#third {
top: 0;
background-color: blue;
 height: 50%;
}

#fourth {
bottom: 0;
background-color: red;
 height: 50%;
}

</style>
</head>
<body>
<div id="first">&nbsp;</div>
<div id="second">&nbsp;</div>
<div id="third">&nbsp;</div>
<div id="fourth">&nbsp;</div>
</body>
</html>

Answer 1

您需要一个类似Foundation或Bootstrap的网格。你会想要：

<div class="row" id="firstBackground">
    <!-- Contents... -->
</div>

<div class="row" id="secondBackground">
    <!-- Contents... -->
</div>

<div class="row" id="thirdBackground">
    <!-- Contents... -->
</div>

<div class="row" id="forthBackground">
    <!-- Contents... -->
</div>

我希望它有所帮助。

如何使div边界倾斜？

1 个答案: