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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With