::before 和 ::after 元素相互重叠破坏背景透明度

Question

我有一个简单的 div 元素，我想在用户将鼠标悬停在它上面时使用 ::before 和 ::after 伪元素为其应用背景形状。我用 rotateX() 旋转了这些元素。我如何设置元素不应相互重叠（或至少不会破坏背景颜色）但它应该看起来像一个单一形状的样式？

尝试使用 % 但没有用。

请帮忙。非常感谢

div{
  width:200px;
  padding: 18px;
  margin: 10px auto;
/*   border: 1px solid black; */
  text-align:center;
  position: relative;
  perspective: 100px;
  z-index: 1;
}
div:hover{
  color:#fff;
}
div:hover::before, div:hover::after{
  content: "";
  display: block;
  background-color: #00000050;
  width: 100%;
  height: 50px;
  position: absolute;
  left: 0%;
  z-index: -1;
}
div::before{
  top:0;
  transform: rotateX(-75deg);
}
div::after{
  bottom:0;
  transform: rotateX(75deg);
}

<div>Hello World</div>

Answer 1

如果你让每个伪元素的一半只有颜色，那么当你旋转它们时，颜色就不会重叠。

需要对 div 的填充进行微调，以使两个旋转的 'halves' 正确相遇，因此如果您寻求响应而不是响应，则必须考虑这一点固定 px 单位的解决方案。

此代码段从伪元素中删除了背景颜色，而是使用线性渐变背景图像，该图像刚好向上（或向下）伪元素的一半。

div {
  width: 200px;
  padding: 18px;
  padding: 16px;
  margin: 10px auto;
  /*   border: 1px solid black; */
  text-align: center;
  position: relative;
  perspective: 100px;
  z-index: 1;
}

div:hover {
  color: #fff;
}

div:hover::before,
div:hover::after {
  content: "";
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 50px;
  position: absolute;
  left: 0%;
  z-index: -1;
}

div::before {
  top: 0;
  transform: rotateX(-75deg);
  background-image: linear-gradient(#00000050 0 50%, transparent 50% 100%);
}

div:hover::after {
  bottom: 0;
  transform: rotateX(75deg);
  background-color: transparent;
  background-image: linear-gradient(to top, #00000050 0 50%, transparent 50% 100%);
}

<div>Hello World</div>

Answer 2

A Haworth's 涵盖了使用线性渐变停止来隐藏每个伪元素一半的颜色。

您可以采用的另一种方法是仅使用一个带有 polygon clip path 的伪元素来制作形状。

.container { display: flex; }
.hoverable { position: relative; margin: auto; padding: 10px 100px; }

.hoverable:hover::before {
  content: "";
  position: absolute;

  inset: 0;
  /* top: 0; left: 0; right: 0; bottom: 0; */

  background-color: rgba(0, 0, 0, 0.25);
  clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%, 20% 50%);
}

<div class="container">
  <div class="hoverable">Hello, World!</div>
</div>

::before 和 ::after 元素相互重叠破坏背景透明度

::before and ::after elements overlapping each other ruining the background transparancy

css

css-position