Question

我真的可以帮到你。

我有一个内部div需要延伸到一个外部div ...那部分不是问题。我的问题是，我需要帮助制作内部div延伸的外部div剪辑。问题是，它们都需要透明。

请参阅下面的图片，了解我想要实现的目标。

这是我到目前为止所做的：

CSS：

.infoBoxOuter {
  border: 10px solid #ffffff;
  padding: 50px;
  width: 300px;
}
.infoBoxInner {
  width: 350px;
}

HTML：

<div class="infoBoxOuter">
  <div class="infoBoxInner">
    <h1 class="white">Lorem Ipsum dolor</h1>
  </div>
</div>

非常感谢任何帮助。感谢。

Answer 1

由于您需要透明度，我认为您基本上是在考虑两种可能性之一：

使用SVG作为边框切口的边框形状
以这种或那种方式生成顶部，左侧和底部边框（最容易在.infoBoxOuter上使用边框），然后使用一个或两个伪元素创建带有间隙的右侧。

以下是方法＃2的示例。您可以将右上角的行作为一个伪元素，将右下角的行作为另一个伪元素，或者您可以执行我在下面所做的操作，并使用渐变来介于白色和透明之间。

您可以根据需要调整数字。我只是尝试获得与您的示例图像大致相似的内容，以便让您了解其工作原理。

html, body {
  height: 100%;
}
body {
  background: linear-gradient(to bottom, midnightblue, steelblue);
}
.infoBoxOuter {
  color: white;
  border-top: 10px solid #ffffff;
  border-left: 10px solid #ffffff;
  border-bottom: 10px solid #ffffff;
  padding: 50px;
  width: 150px;
  box-sizing: border-box;
  position: relative;
}
.infoBoxOuter::after {
  content: '';
  display: block;
  background: linear-gradient(to bottom, white, white 25px, transparent 25px, transparent 140px, white 140px, white);
  width: 10px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
.infoBoxInner {
  width: 350px;
  box-sizing: border-box;
}

<div class="infoBoxOuter">
  <div class="infoBoxInner">
    <h1 class="white">Lorem Ipsum dolor</h1>
  </div>
</div>

需要内部div重叠外部div（都需要透明度）

1 个答案: