Question

我是网络开发的新手，并试图找出如何在元素中添加元素。

＆＃13;

.blackBox {
  background: #000;
  z-index: 0;
}

.text {
  color: #000;
  z-index: 2;
}

.redBox {
  background: red;
  opacity: 0.5;
  z-index: 1;
}

＆＃13;

<div class="blackBox">
  <div class="text">Lorem Ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </div>
  <div class="redBox" />
</div>

＆＃13;

Answer 1

你需要做一些事情。首先，您需要向.redBox position absolute提供.blackBox，并向父母position提供relative top。在此之后，为您的红色框添加0 width，以便元素重叠。

您还需要为红色框添加height和100%。我已height为150%，width为margin-left。这是为了使红色框比容器大，这样它就会直接到达边缘。负transform: rotate(-5deg)用于抵消此。

从这里开始，只需要用.blackBox给出红色框负向旋转。最后，您需要让overflow: hidden .blackBox { background: #000; z-index: 0; position: absolute; height: 50px; width: 300px; padding: 20px; overflow: hidden; border-radius: 10px; } .text { color: #fff; z-index: 2; } .redBox { background: red; opacity: 0.5; z-index: 1; position: absolute; top: 0; margin-left: -25%; width: 150%; height: 100%; transform: rotate(-5deg); }隐藏红色框超出其容器范围的部分。

这可以在以下内容中看到：

<div class="blackBox">
  <div class="text">Lorem Ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </div>
  <div class="redBox" />
</div>

withTransaction

Answer 2

一个元素和一些渐变作为背景：

＆＃13;

.blackBox {
  padding:50px;
  width:300px;
  border-radius:10px;
  border-top:10px solid #000;
  border-bottom:10px solid #000;
  background: 
  linear-gradient(to top left,transparent 50%,#000 51%) 0 0/100% 40px no-repeat,
  linear-gradient(to bottom right,transparent 50%,#000 51%) 0 100%/100% 40px no-repeat,
  red;
}

＆＃13;

<div class="blackBox">
  Lorem Ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... 
</div>

＆＃13;

Answer 3

首先，您必须将容器position设置为text和redBox元素的相对位置和绝对位置。然后为每个值提供一个适当的top值，以便文本覆盖红色框。

然后，您可以使用skewY转换来实现偏斜效果。

我还使用border-radius来获取图片中的圆角边框。

e.g。

.blackBox {
  background: black;
  z-index: 0;
  height: 200px;
  width: 300px;
  position:relative;
  border-radius: 10px;
}

.text {
  position:absolute;
  color: white;
  z-index: 2;
  padding: 10px;
}

.redBox {
  position:absolute;
  background: red;
  opacity: 0.5;
  z-index: 1;
  height: 110px;
  width: 300px;
  top: 45px;
  transform: skewY(-5deg);
}

<div class="blackBox">
  <div class="text">Lorem Ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </div>
  <div class="redBox" />
</div>

Answer 4

这样的东西？

＆＃13;

.blackBox {
  background: #000;
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.text {
  color: #FFF;
  z-index: 2;
  position: absolute;
  top: 5%;
  margin: 10px;
}

.redBox {
  background: darkred;
  position: absolute;
  height: 140px;
  width: 400px;
  overflow: hidden;
  transform: rotate(-10deg);
  left: -40px;
  top: 20px;
}

＆＃13;

<div class="blackBox">
  <div class="text">Lorem Ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </div>
  <div class="redBox">

  </div>
</div>

＆＃13;

Answer 5

修改Obsdidian Ages answer，您可以在没有额外的，无意义的“redbox”元素的情况下执行此操作。而是使用像:before这样的伪元素。我还会说你最好给blackbox一个相对位置，然后内部元素相对于它定位。

要将文字显示为白色，请将.text元素position:absolute和z-index高于:before伪元素。

.blackBox {
  background: #000;
  z-index: 0;
  position: relative;
  height: 50px;
  width: 300px;
  padding: 20px;
  overflow: hidden;
  border-radius:30px;
}

.text {
  color: #fff;
  z-index: 10;
  position:absolute;
}

.blackBox:before {
  background: red;
  opacity: 0.5;
  z-index: 1;
  position: absolute;
  top: 0;
  margin-left: -25%;
  width: 150%;
  height: 100%;
  transform: rotate(-5deg);
  content:'';
}

<div class="blackBox">
  <div class="text">Lorem Ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </div>
</div>

在元素内添加元素

5 个答案: