Add element inside of element

Question

I am new at web development and trying to figure out how to add an element inside of element.

.blackBox {
  background: #000;
  z-index: 0;
}

.text {
  color: #000;
  z-index: 2;
}

.redBox {
  background: red;
  opacity: 0.5;
  z-index: 1;
}

<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 1

There are a few things you'll need for this. First, you'll want to give your .redBox a position of absolute, along with giving the parent .blackBox a position of relative. After this, give your red box a top of 0 so that the elements overlap.

You'll also need to give the red box a width and height. I've gone with 100% for the height, and 150% for the width. This is to make the red box bigger than the container, so that it will go right to the edges. A negative margin-left is used to offset this.

From here it's simply a matter of giving the red box negative rotation with transform: rotate(-5deg). Finally, you'll want to give your .blackBox an overflow: hidden to hide the parts where the red box goes outside the bounds of its container.

This can be seen in the following:

.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>