I'm trying to solve some CSS problem. I'm using TailwindCSS for styling and I want to add some customized style to my letter in a header. I've attached picture how I'd like it to look like. So far I tried to adding custom borders that I positioned absolutely, but it's not pixel perfect if you look closely. And also it's a pain when doing media queries. Before I spend another x amount of hours styling it the way I did so far, I wanted to check if someone knows a better approach on how to achieve the desired look ?
Thanks a lot! custom heading picture
<h1 className='font-bold lg:text-[110px] md:text-[80px] sm:text-[60px] text-[44px] lg:leading-[158.4px] md:leading-[114.4px] sm:leading-[74.4px] leading-[64.4px] uppercase text-white tracking-[10px] md:tracking-[20px] relative'>
<span>HORI</span>
<span className="inline-block transform scale-150 sm:scale-165 translate-x-2 -translate-y-1.1 md:-translate-y-1 md:translate-x-3">
<span className="relative overflow-hidden">
<span className="font-normal">Z</span>
{/* border for letter Z - top*/}
<span className="absolute right-[30px] sm:right-[40px] lg:right-[73px] w-full h-[3.1px] sm:h-[4.5px] lg:h-[8.2px] bg-white top-[12.7px] sm:top-[17.76px] lg:top-[32.2px]"></span>
{/* border for letter Z - bottom*/}
<span className="absolute left-[19px] sm:left-[28px] lg:left-[60px] w-full h-[3.7px] sm:h-[4.5px] lg:h-[8.2px] bg-white bottom-[10px] sm:bottom-[13.7px] lg:bottom-[24.5px]"></span>
</span>
</span>
<span>ON</span>
</h1>
I think this is a better way than using 'relative' and 'absolute'.
<h1
className="font-bold lg:text-[110px] md:text-[80px] sm:text-[60px] text-[44px] lg:leading-[158.4px] md:leading-[114.4px] sm:leading-[74.4px] leading-[64.4px] uppercase text-white tracking-[10px] md:tracking-[20px] relative"
>
<span>HORI</span>
<span
className="inline-block transform scale-y-150 scale-x-[3] skew-x-[35deg] font-light sm:scale-y-165 translate-x-2 -translate-y-1.1 md:-translate-y-1 md:translate-x-3"
>
Z
</span>
<span>ON</span>
</h1>
