Kevin Powell - Community•5mo ago

How to make slope box in css.

I have one card. in that card, i have one slope. i tried using clippath for creating that slope. but it doesn't worked me out. please help me. i have attached both images. first one was design. second one was i trying to make that design.just need that slopy curve, code:

import Image from 'next/image';

export default function Home() {
  return (
    <main>
      <div>Card</div>
      <div
        style={{
          height: '330px',
          width: '340px',
          background: 'rgba(47, 60, 81, 0.4)',
          borderRadius: '10px',
          overflow: 'hidden',
        }}
      >
        <div style={{ width: '100%', height: '260px', position: 'relative' }}>
          <Image
            alt="game image"
            src={
              'https://i.postimg.cc/j2m7zPBv/0dd7dee9f289164f5b5972c00be87b1c.png'
            }
            fill
          />
        </div>
        <div
          style={{
            marginTop: '-60px',
            zIndex: 100,
            position: 'relative',
            height: '100%',
            // padding:"0px 10px"
            backgroundColor: 'red',
            // clipPath: 'polygon(0 0, 100% 0, 100% 75%, 75% 75%, 0 50%)',
          }}
        >
          <div style={{ color: '#fff', fontSize: '28px' }}>Call of War</div>

          <div style={{ padding: '0px 10px', marginTop: '20px' }}>
            <button
              style={{
                background: 'green',
                width: '100%',
                height: '30px',
              }}
            >
              Play Now
            </button>
          </div>
        </div>
      </div>
    </main>
  );
}

import Image from 'next/image';

export default function Home() {
  return (
    <main>
      <div>Card</div>
      <div
        style={{
          height: '330px',
          width: '340px',
          background: 'rgba(47, 60, 81, 0.4)',
          borderRadius: '10px',
          overflow: 'hidden',
        }}
      >
        <div style={{ width: '100%', height: '260px', position: 'relative' }}>
          <Image
            alt="game image"
            src={
              'https://i.postimg.cc/j2m7zPBv/0dd7dee9f289164f5b5972c00be87b1c.png'
            }
            fill
          />
        </div>
        <div
          style={{
            marginTop: '-60px',
            zIndex: 100,
            position: 'relative',
            height: '100%',
            // padding:"0px 10px"
            backgroundColor: 'red',
            // clipPath: 'polygon(0 0, 100% 0, 100% 75%, 75% 75%, 0 50%)',
          }}
        >
          <div style={{ color: '#fff', fontSize: '28px' }}>Call of War</div>

          <div style={{ padding: '0px 10px', marginTop: '20px' }}>
            <button
              style={{
                background: 'green',
                width: '100%',
                height: '30px',
              }}
            >
              Play Now
            </button>
          </div>
        </div>
      </div>
    </main>
  );
}

I tried but not working out. can anyone please help me with this out. stackblitz link: https://stackblitz.com/edit/nextjs-ygovq5?file=app%2Fpage.tsx

Smack Alpha

StackBlitz

Nextjs (forked) - StackBlitz

The React framework for production.

4 Replies

Choo♚𝕂𝕚𝕟𝕘•5mo ago

You commented out the clip path, so it's not going to do anything. Also the coordinates in that path do not match the shape in your example. Also, the shape that you want has a slight bit of curvature at the corners. The approach that you are using will only work if you are willing to accept sharp corners.

smackalphaOP•5mo ago

can u help me with that.. @ChooKing i know it wont work. but i dont know how to implement that ya. i tried a lot

Choo♚𝕂𝕚𝕟𝕘•5mo ago

If you want to use this approach and you can accept the lack of rounding, this is an example of how to do it: https://codepen.io/chooking/pen/RwmXNBa

smackalphaOP•5mo ago

@ChooKing Thank u so much..

Gaming

Programming

How to make slope box in css.