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:
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.
When defining a clipping path we specify
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% .
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>
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
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>
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>