Html Question posted in
Some basic documentation can be found here.

Html – CSS for a custom shape and adding image below that shape

Thanks for the help in advance. I was trying code the design of the below image. For that i used the before and after to create the shape.But when i tried to place the dot pattern image as in the design i got stuck.I tried z-index but was not successful.Can anyone help me to resolve this issue
enter image description here

The code i wrote

.banner {
  padding-top: 8rem;
  position: relative;
  height: 75rem;
  background: linear-gradient(180deg, #03062f 0%, #180b74 100%);
}
.banner::before, .banner::after {
  position: absolute;
  content: "";
}
.banner::before {
  background: #f1f5f9;
  height: 18rem;
  z-index: 1;
  left: 0;
  width: 100%;
  transform: skewY(4.2deg);
  transform-origin: top right;
  bottom: -19rem;
}
.banner::after {
  width: 16rem;
  height: 16rem;
  border-bottom: solid 8rem #f1f5f9;
  border-right: solid 8rem #f1f5f9;
  border-left: solid 80px transparent;
  border-top: solid 8rem transparent;
  right: 0;
  bottom: -4rem;
  background: #150a6b;
}

.dot-pattern {
  position: absolute;
  z-index: 1;
  height: 14rem;
  bottom: -7.5rem;
}
<section class="banner">
      <div class="container h-100 position-relative">
        <div class="dot-pattern">
          <img src="assets/img/svg/dots.svg" alt="dots" />
        </div>
      </div>
    </section>
Tags:

2

Answers


  1. 0

    You can use polygon to handle the bottom edges

    The grey rectangle below represents the dots

    If you want to do some tests with polygon you can use this website https://bennettfeely.com/clippy/

    The result will be something like this
    enter image description here

    If it solves your issue, don’t forget to mark the correct answer. Thanks

    :root {
  --width: 800px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  background-color: darkblue;
  width: var(--width);
  height: 300px;
}
.nested-box {
  background-color: blue;
  width: 600px;
  height: 300px;
  margin: auto;
}
.triangle {
  width: var(--width);
  height: 50px;
  background-color: #dd4f39;
  clip-path: polygon(0 0, 103% 0, 96% 100%);
}

.box2 {
  background-color: grey;
  width: var(--width);
  height: 50px;
  position: relative;
  top: -16px;
  z-index: -1;
}
     <div class="container">
      <div class="box">
        <div class="nested-box"></div>
      </div>
      <div class="triangle"></div>
      <div class="box2"></div>
    </div>
    Login or Signup to reply.
  2. 0

    It seems like the issue might be related to the stacking context created by the transform property in your ::before pseudo-element. When you apply a transform property to an element, it creates a stacking context, affecting the rendering order of elements.

    To ensure that the dot pattern is displayed on top of the skewed shape, you should adjust the stacking context and set a higher z-index for the .dot-pattern element. Here’s a modified version of your CSS:

    .banner {
  padding-top: 8rem;
  position: relative;
  height: 75rem;
  background: linear-gradient(180deg, #03062f 0%, #180b74 100%);
}

.banner::before,
.banner::after {
  position: absolute;
  content: "";
  z-index: 1; /* Ensure that the pseudo-elements are behind the dot pattern */
}

.banner::before {
  background: #f1f5f9;
  height: 18rem;
  left: 0;
  width: 100%;
  transform: skewY(4.2deg);
  transform-origin: top right;
  bottom: -19rem;
}

.banner::after {
  width: 16rem;
  height: 16rem;
  border-bottom: solid 8rem #f1f5f9;
  border-right: solid 8rem #f1f5f9;
  border-left: solid 80px transparent;
  border-top: solid 8rem transparent;
  right: 0;
  bottom: -4rem;
  background: #150a6b;
}

.dot-pattern {
  position: absolute;
  z-index: 2; /* Ensure that the dot pattern is above the pseudo-elements */
  height: 14rem;
  bottom: -7.5rem;
}

    By setting a higher z-index for the .dot-pattern element, you should ensure that it appears on top of the pseudo-elements in the stacking order. Adjust the z-index values as needed to achieve the desired visual hierarchy.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search