底部倾斜的 Div答案

【问题标题】：Div with a slanted bottom底部倾斜的 Div
【发布时间】：2016-06-27 06:43:13
【问题描述】：

我正在尝试为我的网站创建一个容器，并使其底部略微倾斜，如下所示：

有人知道怎么做吗？我尝试了transform: skewy(-10deg);，但它也做到了我试图不做的顶部。

HTML

<div class="slanted">HI</div>

CSS

.slanted {
    background-color:red;
    height:500px;
}

【问题讨论】：

你能提供更多的上下文吗？如果没有内容而只需要颜色，则可以旋转彩色项目并将overflow:hidden 应用于父元素。
Two-tone background split by diagonal line using css的可能重复

标签： html css

【解决方案1】：

HTML

<div class="slanted">HI</div>

CSS

.slanted {
    background-color:red;
    height:500px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 56%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}

CodePen

http://codepen.io/anthonyastige/pen/PzWvqo

参考

Angled Edges with CSS Masks and Transforms

【讨论】：

【解决方案2】：

请参阅下面的 sn-p，这可能对您有用：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .updatedDiv {
                border-top-color: transparent; 
                border-right-color: rgb(7, 133, 214); 
                border-top-width: 59px; 
                border-right-width: 110px; 
                border-top-style: solid; 
                border-right-style: solid;
            }
        </style>
    </head>
    <body>
        <div  class="updatedDiv"></div>
    </body>
</html>

【讨论】：

看起来这不适用于其中的内容 - codepen.io/anthonyastige/pen/YWNbqb
我们可以有两个 div。一个显示倾斜的 div，另一个显示内容

【解决方案3】：

我回答了我自己的问题。只是希望顶部和底部不倾斜，所以我添加了一些负边距。

* {
  margin: 0;
  height: 0;
}

.first {
  margin-top: -45px;
}

.slanted {
  height: 500px;
  -webkit-transform: skewy(-3deg);
  transform: skewy(-3deg);
}

footer {
  position: relative;
  margin-top: -45px;
  height: 150px;
  background-color: #bdc3c7;
}

<section class="slant-container">
  <div class="slanted first" style="background-color:#2ecc71;"></div>
  <div class="slanted" style="background-color:#3498db;"></div>
  <div class="slanted" style="background-color:#f39c12;"></div>
</section>

<footer></footer>

【讨论】：