Can I overlap div elements with clipped paths in CSS without masking the child div?

Question

I'm trying to create two trapezoids using CSS and have them overlay on top of one another. The problem is that when I use the clip-path attribute, it automatically masks the other div below it. Is there any way for me to create a background image similar to the attached image without using absolute positioning in my div elements?

An example of what I've done so far:

.bg1 {
  background-color: #ff0000;
  padding: 100px 0;
  clip-path: polygon(0 18%, 100% 0, 100% 90%, 0 100%);
}
.bg2 {
  background-color: #3f3f3f;
  padding: 100px 0;
  clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 100%);
}

<div class="bg1">
  <div class="bg2">
    <h1>Hello World</h1>
  </div>
</div>

Example:

example screenshot

Temani Afif · Accepted Answer · 2021-02-03 00:16:42Z

Use pseudo elements:

.box::before,
.box::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff0000;
  clip-path: polygon(0 0%, 100% 15%, 100% 85%, 0 100%);
}

.box::after {
  background-color: #3f3f3f;
  transform: scaleX(-1); /* the shape is the same so I simple invert it but you can apply another clip-path here */ 
}

.box {
  padding:50px;
  display:inline-block;
  position:relative;
}

<div class="box">
  <h1>Hello World</h1>
</div>

You can also do it without pseudo element:

.box {
  --v:15%;
  
  padding:50px;
  margin:5px;
  display:inline-block;
  clip-path: polygon(0 0, 50% var(--v), 100% 0, 100% 100%, 50% calc(100% - var(--v)), 0 100%);
  background:
      linear-gradient(to top    left,transparent 48%,red 50%) top    -1px left 0,
      linear-gradient(to bottom left,transparent 48%,red 50%) bottom -1px left 0,
      #3f3f3f;
  background-size:100% calc(2*var(--v));
  background-repeat:no-repeat;
}

<div class="box">
  <h1>Hello World</h1>
</div>

<div class="box" style="--v:10%">
  <h1>Hello World</h1>
</div>

<div class="box" style="--v:5%">
  <h1>Hello World</h1>
</div>

Collectives™ on Stack Overflow

Can I overlap div elements with clipped paths in CSS without masking the child div?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related