Search code examples
htmlcsstwitter-bootstrapresponsive-designtailwind-css

I need to have two clip path polygons separated by s space

I need to have two clip path polygons separated by s space, one to the lefxt and another one to the right after a space. How can I achieve this? Here is the image design. enter image description here

here is my code snippet.

  .content {
    position: relative;
    z-index: 1;
    color: black;
    padding: 20px;
    margin: 0;
    box-sizing: border-box;
  }

  .content::before,
  .content::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }

  .content::bef23ore {
    background-color: #0A76E3;
    clip-path: polygon(0 0, 59% 0, 46% 100%, 0 100%)
  }

  .content::after {
    background-color: #0A76E3;
    clip-path: polygon(0 0, 59% 0, 46% 100%, 0 100%)
  }
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<div class="content h-screen">
    <div class='flex flex-row-2 justify-around items-center pt-32'>
        <div class="w-2/5">
            <div class="flex items-center justify-start gap-4 pb-4">
                <h2 class="text-6xl font-extrabohld text-white">Who Are We</h2>
            </div>
            <h3 class="text-3xl space-y-4 text-white">lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</h3>
        </div>
        <img class="img w-2/5" src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image" />
    </div>
</div>

I tried using two different divs with different clip paths to achieve the solution. I also did research to figure out the solution to no avail.

Solution

  • The ::before and ::after pseudo elements are in the same position and have the same clip-path which is why the right-side orange triangle does not show. Consider adjusting the ::after pseudo element to be on the right side with a different clip-path to render as a triangle shape:

    .content {
  position: relative;
  z-index: 1;
  color: black;
  padding: 20px;
  margin: 0;
  box-sizing: border-box;
}

.content::before,
.content::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}

.content::before {
  background-color: #0A76E3;
  clip-path: polygon(0 0, 59% 0, 46% 100%, 0 100%);
  left: 0;
  right: 0;
  z-index: -1;
}

.content::after {
  background-color: #ff4200;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  right: 0;
  width: 20%;
}
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<div class="content h-screen">
  <div class='flex flex-row-2 justify-around items-center pt-32'>
    <div class="w-2/5">
      <div class="flex items-center justify-start gap-4 pb-4">
        <h2 class="text-6xl font-extrabohld text-white">Who Are We</h2>
      </div>
      <h3 class="text-3xl space-y-4 text-white">lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</h3>
    </div>
    <img class="img w-2/5" src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image" />
  </div>
</div>