Use clip path in TailwindCSS
With clip-path , you can add a touch of personality to your website design and make the user interface even more attractive.
You can define a clipping region for an element. It's especially useful for creating interesting shapes, masking images, or creating different visual effects.
In this article we will learn how to create an overlapping header and content section like this:
Clip path basic shapes
When using the clip-path property, the first thing to decide is what kind of shape you want to create. This can be a circle, ellipse, polygon, or path. To achieve the result shown above, we will define a polygon.
Define clip-path
When defining a clipping path we specify x and y coordinates. You can do this by specifying pixels, but a better solution is to use percentages and make your polygon responsive. The starting point is the top left corner. This is the 0px 0px point or 0% 0% point and the bottom right point is 100% 100% . Here I could not specify the coordinates in pixels as I don't know the size of the container element. The first number represents the x coordinate and the second is the y coordinate. With the above, we can now easily create the following shape:
To do this, we need to create a polygon of 5 points. The top two points (top left and top right), which are also the first two points of the polygon, are 0% 0% and 100% 0% . Then comes the bottom right, which is 100% 100% . And now comes the point. On the bottom side, we insert an intermediate point which is horizontally in the middle, but not completely at the bottom of the container, but a little bit above it. This point will give the shape of the tip. This will be the 50% 70% point. Finally, the last point is given, which is the bottom left 0% 100% .
Clip-path in TailwindCSS
Since TailwindCSS 3 currently has no dedicated utility class for clip-path , we can create it using arbitrary values. It is also important to know that arbitrary values cannot use space characters, they must either be deleted or replaced with underscore _ characters. So our code looks like this:
<div class="relative w-full h-12 flex">
<div class="bg-amber-500 flex w-full p-1 justify-center [clip-path:polygon(0%_0%,_100%_0%,_100%_100%,_50%_70%,_0_100%)]"></div>
</div>Creating an overlapping effect
The shape created in the previous step can be the header part of our website, and then the actual content will be placed underneath it. The code looks like this:
The result, however, is not quite what you probably want. This will require some fine-tuning. We need to slide the content div under the header container. This can be achieved by setting the header div position:relative and setting the content div to a negative top margin. Be careful here to set the top padding to the right size for the content div, so that the header does not obscure the text in the content section.
<div class="bg-amber-500 relative flex w-full p-1 h-12 justify-center [clip-path:polygon(0%_0%,_100%_0%,_100%_100%,_50%_70%,_0_100%)]">Header</div>
<div class="bg-sky-500 -mt-4 text-white w-full p-2 h-12 flex justify-center">Content</div>
Drop shadow to clip-path
You can also add a shadow to the clip-path. However, you can not use the shadow utility class, but you need to use drop-shadow which uses filter in the background. Besides this, you need to wrap the div with the clip-path into a container and add the drop-shadow class to this element.
<div class="relative drop-shadow-lg flex w-full">
<div class="bg-amber-500 flex w-full p-1 h-12 justify-center [clip-path:polygon(0%_0%,_100%_0%,_100%_100%,_50%_70%,_0_100%)]">
Header
</div>
</div>
<div class="bg-sky-500 -mt-4 text-white w-full p-2 h-12 flex justify-center">Content</div> 
References
