How to make slope box in css.

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>
  );
}