How to change the shape of a div yet keep its functionality as a normal div?

Question

I saw the below design and would like to implement something similar in my web application, but how do I make the div tilted on the top (as shown in the image)?

My output:

<div class="" style="height: 100vh; background-color: white"></div>
<div class="" style="height: 100vh;position: relative; border: 2px solid black;">
  <div class="" style="height: calc(50% + 2rem);background-color: white;"></div>
  <div class="" style="height: calc(50% - 2rem);background-color: blue;"></div>
  <h1 style="position: absolute; top: 50%; z-index: 9; transform: translateY(-50%); transform: rotate(-2deg); text-align: center;width: 100%; background-color: yellow; height: 4rem">WELCOME TO OUR WEBSITE</h1>
</div>
<div class="" style="height: 100vh; background-color: blue"></div>

I also tried tailwind skew and transform rotate but there was no luck I got a horizontal scrollbar and there is white space after turning the div

Expected: Similar to the first image I posted, I want to make a proper responsive tilted div using tailwind. It should be full width tilted on the top with a two-tone color and a straight bottom.

Answer 1

This turned out to be more difficult than I anticipated. I found only one relatively responsive approach.

There are two challenges:

1. overflow: hidden cannot be applied exclusively to the x-axis or y-axis. If overflow: hidden is applied in one direction, it hides overflow in both directions.
2. After rotating at a fixed angle, there will be different amounts of empty space depending on the viewport width. This space needs to be filled.

Solutions:

1. For the first issue, use overflow: clip to hide overflow in only the x direction.
2. For the second issue, define another element to fill the empty space. However, the height of this element needs to be estimated in advance based on the rotation angle, as being too long or too short could cause a visual overflow effect.

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex min-h-dvh flex-col justify-center">
  <article class="relative mx-8 my-32 overflow-x-clip">
    <header class="inset-x-0 bottom-full min-h-12 w-[200%] origin-bottom-left -rotate-6 bg-lime-400">
      <div class="w-1/2">
        <!-- header content -->
        <div class="flex items-center justify-center py-2 text-center text-3xl font-extrabold uppercase">Welcome to our website</div>
      </div>
      <div class="absolute inset-0 top-full h-96 bg-red-500"></div>
    </header>
    <section class="relative h-96 bg-blue-500">
      <!-- main content -->
      <p class="flex h-full items-center justify-center text-3xl font-bold text-white">Your content here</p>
    </section>
  </article>
</div>

Demo on Tailwind Play.

In the example, I used red and blue to differentiate between the filling elements and the main content. In actual use, they should be set to the same color.