html - 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;
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
它隐藏了伪元素本身。请指出我做错的地方
解决方案
你可以在没有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>
推荐阅读
- node.js - 如何在不同服务中使用无服务器框架在 api gateway aws 上获取相同的主机
- docker - 如何配置 minikube 以使用 docker 私有注册表
- python - 如何对列表中的两行求和?
- android - 导航图和多个主机活动
- javascript - 使用谷歌地球引擎在列表中查找最接近的日期
- java - 如何在 Android Studio 2019 中捕获图片而不进行预览
- python - 如何合并几个平均字段的csv文件?
- vue.js - 如果满足某些条件,bootstrap-vue 复选框会阻止更改
- laravel - laravel 中的动态前缀路由
- android - 如何在没有构造函数的情况下为对象实例化设置断点?