Question

我要在主div内创建一个div，该div必须从底部对角线切割

我尝试使用转换偏斜，但没有用 div的CSS：

  .Rectangle{
      width: 100%;
      height: 566px;
      -webkit-transform: skewy(-3deg);
      transform: skewy(-3deg);
      background-image: linear-gradient(5deg, #00a6ff, #006dff);
   }

我希望div从底部斜切。上部不应更改。

Answer 1

尝试使用transform: rotate并使用两个不同的div来执行此操作。这是示例代码。希望对您有帮助

HTML

<div class="wrapper">
  <div class="cut">
  </div>
</div>

CSS

.wrapper {
  background: blue;
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  overflow: hidden;
  position: relative;
}

.cut {
  background: #fff;
  position: absolute;
  top: 487px;
  right: -7px;
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  transform-origin: center top;
  transform: rotate(-5deg);
}

JS小提琴链接：https://jsfiddle.net/SJ_KIllshot/45rgpqnt/

Answer 2

尝试使用伪元素

.mainDiv {
  width: 100%;
  background: #5647FF;
  height: 300px;
  position: relative;
  color: #fff;
Text-align:center; 
}

.mainDiv:after {
          position: absolute;
    content: "";
    left: 0;
    bottom: -50px;
    width: 100%;
    height: 100px;
    transform: skewY(-3deg);
    background: #fff;
}

<div class="mainDiv">
  <p>your conetent</p>
</div>

Answer 3

使用clip-path

.box {
  height: 200px;
  background-image: linear-gradient(5deg, #00a6ff, #006dff);
  
  -webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),0 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),0 100%); 
}

<div class="box">

</div>

如何从底部对角切割div？

3 个答案: