具有三角形形式的 CSS 矩形-解网

问：

我怎样才能在 SCSS 上做到这一点

我尝试将 SVG 用于三角形，但三角形的渐变效果不佳

<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>

HTML CSS Sass 前端

具有三角形形式的 CSS 矩形

css rectangle with triangle form

评论