css rectangle with triangle form

how i can make it on scss

i tryied use svg for triangle, but gradient bad work with triangle

<svg viewBox="0 0 16 36" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0H0.343369C2.90388 0 5.30968 1.22564 6.81495 3.29695L14.0822 13.297C16.1201 16.1012 16.1201 19.8988 14.0822 22.703L6.81495 32.7031C5.30967 34.7744 2.90388 36 0.343369 36H0V0Z" fill="#181A28"/>
    <path d="M0 0H0.343369C2.90388 0 5.30968 1.22564 6.81495 3.29695L14.0822 13.297C16.1201 16.1012 16.1201 19.8988 14.0822 22.703L6.81495 32.7031C5.30967 34.7744 2.90388 36 0.343369 36H0V0Z" fill="url(#paint0_radial_2_119457)"/>

    <defs>
        <radialGradient id="paint0_radial_2_119457" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(62 36) rotate(-90) scale(46.5 162.75)">
            <stop stop-color="#4C2FFF"/>
            <stop offset="1" stop-color="#0E0F16"/>
        </radialGradient>
    </defs>
</svg>

              <div
                className={classNames(
                  'absolute right-[-6px] top-[50%] z-[-1] h-[34px] w-[16px] translate-y-[-50%]',
                  layoutData?.side === 'left' &&
                    'left-[-6px] right-[initial] rotate-180',
                )}
              >
                <TriangleIcon />
              </div>

Solution

I would try it with a clip-path:

<div class="shape"></div>

.shape {
  width: 250px;
  height: 70px;
 background: linear-gradient(to bottom, #a65bff, #8a2be2);
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
  border-radius: 20px;
}

See example here: https://codepen.io/plant996/pen/rNbrQZV The radius of the pointy part is tricky, you could also use a clippath with a path, see: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path .

Hope that helps!