如何解决将元素放在剪切的 div 上而不隐藏
我正在努力实现这样的目标：
我使用剪辑路径来塑造背景，但它导致项目不显示。我发现了一些关于线性梯度黑客的东西，但我看到结果有点“低质量”，边框非常像素化。任何解决方法？我试过 overflow: visible; 和 z-index: 1;
HTML：
<div class="background">
<ul class="btn-group">
<li class="btn-group-item">
<a href="#">Item 1</a>
</li>
<li class="btn-group-item">
<a href="#">Item 2</a>
</li>
<li class="btn-group-item">
<a href="#">Item 3</a>
</li>
</ul>
</div>
CSS：
.background {
background: #3f3f3f;
clip-path: polygon(75% 0,100% 75%,100% 100%,0 100%,0 43%);
}
.btn-group {
height: 300px;
display: flex;
align-items:center;
}
.btn-group-item {
background: black;
color: white;
}
解决方法
我上次遇到了类似的问题。只要 .btn-group ul 在剪切的 div 中，无论您尝试什么，您都无法做到。
您应该在容器 div 之外编写 .btn-group ul 并使用 position:absolute 属性。
.background {
background: #3f3f3f;
clip-path: polygon(75% 0,100% 75%,100% 100%,0 100%,0 43%);
position:relative;
height:300px;
}
.btn-group {
height: 300px;
display: flex;
align-items:center;
list-style:none;
position:absolute;
top:-3rem;
}
.btn-group-item {
background: black;
color: white;
margin:1rem;
}
a{
display:inline-block;
text-decoration:none;
color:#fff;
height:100px;
width:180px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="background">
</div>
<ul class="btn-group">
<li class="btn-group-item">
<a href="#">Item 1</a>
</li>
<li class="btn-group-item">
<a href="#">Item 2</a>
</li>
<li class="btn-group-item">
<a href="#">Item 3</a>
</li>
</ul>
</body>
</html>注意：根据您的要求，在 left: ul 上使用 top: 的 position:absolute 和 .btn-group 属性
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。