CODEWITHSUNDEEP
htmlcss
rocky01
rocky01

Reputation: 13

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

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

Upvotes: 1

Views: 1304

Answers (1)

Temani Afif
Temani Afif

Reputation: 273571

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>

Upvotes: 1

Related Questions