Question

我正在尝试为我的网站创建一个容器，让它像底部一样略微倾斜：

有谁知道怎么做？我尝试了transform: skewy(-10deg);，但它确实排在首位，我试图不做。

HTML

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

CSS

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

Answer 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

Answer 2

请参阅下面的代码段，这可能对您有用：

<!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>

Answer 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>

Div倾斜的底部

3 个答案: