如何在SCSS中实现带三角形的矩形？SVG渐变问题求助

我需要实现带三角形的矩形样式，想请教如何使用SCSS完成该效果。此前我尝试使用SVG制作三角形，但渐变效果表现不佳，相关SVG代码及React组件代码如下：

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

可以通过SCSS伪元素结合CSS渐变属性实现，完全替代SVG方案，解决渐变适配问题的同时提升样式灵活性。以下是具体实现：

1. 核心SCSS代码 #

// 定义可复用的渐变变量
$triangle-gradient: radial-gradient(
  ellipse at right center,
  #4C2FFF 0%,
  #0E0F16 100%
);

.triangle-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 34px;
  z-index: -1;
  background: $triangle-gradient;
  // 裁剪出和SVG一致的三角形路径
  clip-path: polygon(
    0 0,
    0.34px 0,
    6.81px 3.3px,
    14.08px 13.3px,
    14.08px 22.7px,
    6.81px 32.7px,
    0.34px 36px,
    0 36px,
    0 0
  );

  // 左侧三角形的位置与翻转
  &.left {
    left: -6px;
    right: initial;
    transform: translateY(-50%) rotate(180deg);
  }

  // 右侧三角形的位置
  &.right {
    right: -6px;
  }

  // 可选：添加深色底层路径（对应SVG中的#181A28路径）
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #181A28;
    clip-path: inherit;
    z-index: -1;
  }
}

2. 修改后的React组件 #

替换原有的SVG组件，直接使用SCSS类名：

<div
  className={classNames(
    'triangle-container',
    layoutData?.side === 'left' ? 'left' : 'right'
  )}
/>

3. 方案优势 #

• 渐变效果更可控：CSS径向渐变无需复杂坐标转换，适配不同尺寸更灵活
• 样式维护便捷：通过SCSS变量统一管理颜色和路径参数，修改成本低
• 性能更优：纯CSS渲染减少SVG资源加载开销
• 响应式友好：可通过媒体查询快速调整尺寸、渐变参数

内容的提问来源于stack exchange，提问作者pavel