Question

我正在尝试使用上方曲线的伪元素来实现下面的布局，但是这样做有问题

我已经尝试过

ul li{
  width: 300px;
  min-height: 400px;
  border: 5px solid #bcbcbc;
  padding: 5px;
  list-style: none;
}
.upper{
  height: 200px;
}
.bottom{
  background: #000;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.bottom:before
{
 content: '';
 position: absolute;
 top:-50px;
 border-bottom:25px solid #000;
 content: '';
    position: absolute;
    top: -50px;
    border-bottom: 25px solid #000;
    border-top: 25px solid transparent;
    width: 100%;
    border-left: 150px solid transparent;
    border-right: 150px solid #000;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
   <li>
     <div class="upper"></div>
      <div class="bottom"></div>
   </li>
  </ul>
</body>
</html>

但是当我将.bottom类的溢出隐藏起来时，它就是在隐藏伪元素本身。请指出我做错了什么地方

Answer 1

您可以使用pseudo方法在没有skew()元素的情况下完成此操作：

ul li{
  width: 300px;
  height:400px ;
  border: 5px solid #bcbcbc;
  padding: 5px;
  list-style: none;
}
.parent{
 overflow:hidden;
     position:relative;
     height:100%;
     width:100;
     }

.bottom{
  background: #000;
  height: 400px;
  width:100%;
  position:absolute;
  bottom:-200px;
  left:0;
  transform:skewY(-15deg)
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
   <li>
   <div class="parent">
      <div class="bottom"></div>
      </div>
   </li>
  </ul>
</body>
</html>

Answer 2

您只需要将 bottom：before 伪元素的宽度更改为auto而不是100％，并从底层类中删除overflow:hidden属性。

检查下面的代码段

ul li{
  width: 300px;
  min-height: 400px;
  border: 5px solid #bcbcbc;
  padding: 5px;
  list-style: none;
}
.upper{
  height: 200px;
}
.bottom{
  background: #000;
  height: 200px;
  position: relative;
}
.bottom:before
{
 content: '';
 position: absolute;
 top:-50px;
 border-bottom:25px solid #000;
 content: '';
    position: absolute;
    top: -50px;
    border-bottom: 25px solid #000;
    border-top: 25px solid transparent;
    width: auto;
    border-left: 150px solid transparent;
    border-right: 150px solid #000;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
   <li>
     <div class="upper"></div>
      <div class="bottom"></div>
   </li>
  </ul>
</body>
</html>

但是，正确的方法是将clip-path用作demonstrated here

Answer 3

将此CSS添加到您的Bootom类中

.bottom{
  background: #000;
  height: 200px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 38%, 100% 0%, 100% 100%, 0% 100%);
}

溢出：隐藏使伪元素本身隐藏

3 个答案: