Kevin Powell - Community•3mo ago

Need help on this component design

        <div className='flex h-[569px] gap-[6px] border border-green-500'>

          <div className='h-[] w-[264.88px] skew-x-[-21deg] bg-red-500'></div>

          <div className='w-[264.88px] skew-x-[-21deg] overflow-hidden'>
            <div className='size-full skew-x-[21deg] bg-blue-950'>
              {/* <Image
              src='/assets/home/img.png'
              alt='img'
              // height={569}
              // width={561}
              // fill
              priority
              quality={100}
              objectFit='cover'
              className='skew-x-[21deg]'
            /> */}
            </div>
          </div>

          <div className='h-[] w-[264.88px] skew-x-[-21deg] bg-red-500'></div>

        </div>

        <div className='flex h-[569px] gap-[6px] border border-green-500'>

          <div className='h-[] w-[264.88px] skew-x-[-21deg] bg-red-500'></div>

          <div className='w-[264.88px] skew-x-[-21deg] overflow-hidden'>
            <div className='size-full skew-x-[21deg] bg-blue-950'>
              {/* <Image
              src='/assets/home/img.png'
              alt='img'
              // height={569}
              // width={561}
              // fill
              priority
              quality={100}
              objectFit='cover'
              className='skew-x-[21deg]'
            /> */}
            </div>
          </div>

          <div className='h-[] w-[264.88px] skew-x-[-21deg] bg-red-500'></div>

        </div>

I want to make the blue part (which a nextjs Image) to be rendered like the red part. the image being used has the same height and the width has the size of both ends of the skew x distance.

4 Replies

KevinOP•3mo ago

something like this where the black parts are nextjs images

ἔρως•3mo ago

at this point, im going to say that the best is for you to stop and re-write this in svg you should try using inkscape

Chris Bolson•3mo ago

Does it need to contain an image at all? Otherwise it could be made with CSS alone, something like this

div{
width: 300px;
  height: 200px;
  transform: skew(-21deg);
  background: linear-gradient(90deg, blue 98px, white 102px, black 102px 198px, white 198px, blue 202px); 
  clip-path: polygon(0 0, 85%  0, 100%  60%, 100% 100%, 0 100%)

div{
width: 300px;
  height: 200px;
  transform: skew(-21deg);
  background: linear-gradient(90deg, blue 98px, white 102px, black 102px 198px, white 198px, blue 202px); 
  clip-path: polygon(0 0, 85%  0, 100%  60%, 100% 100%, 0 100%)

ἔρως•3mo ago

that's a better option

Gaming

Programming

Need help on this component design