Issue
I am trying to recreate this design for the navbar
But I can't figure out a proper way to add the triangle shape.
<!-- Navbar Logo Space -->
<div>
<div id="navbar-logo" class="z-0 inset-1.5 absolute bg-light-green w-1/4 h-24">
<div class="hidden md:flex flex items-center space-x-1">
<!-- logo -->
<a href="#" class = "py-5 px-2" >LOGO</a>
<!-- title -->
<a href="#" class = "py-5 px-2">PLACEHOLDER</a>
</div>
</div>
</div>
I can add a triangle using this:
#navbar-logo::after {
content: '';
background: #06C982;
position: absolute;
top: 0;
z-index: 10;
left: 27em;
width: 10em;;
height: 99%;
transform: skewX(-38deg);
}
But its fixed and its causing issues with responsiveness.
Is there an efficient way I could do this? Possibly with tailwind.
Solution
The easiest way to do this is with CSS clip-path
. There are generators online that can do this for you, but here's a snippet that should work while being responsive:
clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 50% 100%, 0% 100%);
To change the angle, simply change the 80%
value in the snippet. I do highly recommend learning clip-path though, it's a very helpful tool for unique CSS.
Answered By - micahlt
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.