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>

A quick note `
` is not valid html : https://stackoverflow.com/questions/3558119/are-non-void-self-closing-tags-valid-in-html5 — Jon P, Apr 09 '18 at 03:53

Obsidian Age · Answer 1 · 2018-04-09T03:33:50.010

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>

Great detail of the `css` but just missing the `border-radius` on `.blackBox` — NewToJS, Apr 09 '18 at 03:32
thx you, this was helpful. Also the .text would need a position. I added that in :) — beggiiner, Apr 09 '18 at 04:09

score 2 · Answer 2 · answered Apr 09 '18 at 09:51

What about one element and some gradient as background:

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

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

H77 · Answer 3 · 2018-04-09T03:41:14.220

First you'll have to set the container position to relative and absolute position the text and redBox elements. Then give each of them an appropriate top value so that the text overlays the red box.

You could then use skewY transformation to achieve the skewed effect.

I've also used border-radius to get the rounded border you have in the image.

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>

score 0 · Answer 4 · answered Apr 09 '18 at 03:18

Something like this?

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

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

Jon P · Answer 5 · 2018-04-09T03:48:53.487

Modifying Obsdidian Ages answer, you can do this without the additional, meaningless, "redbox" element. Instead use a pseudo element like :before. I would also say you are better off giving blackbox a relative position, internal elements are then positioned relative to it.

To get the text displaying as white, give the .text element position:absolute and a z-index higher than out :before pseudo-element.

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

Add element inside of element

5 Answers5