如何在React中用CSS按百分比填充非四边形图形（如星形）？

要实现按百分比展示双色星形，你可以通过裁剪上层灰色星星的方式，让下层金色星星的对应比例部分显露出来。以下是修改后的完整方案：

核心思路 #

• 保持金色星星（下层，z-index:1）完整显示
• 对灰色星星（上层，z-index:2）进行动态裁剪，只显示未被金色覆盖的右侧部分
• 根据传入的百分比，计算灰色星星需要隐藏的左侧宽度

修改后的代码 #

import React from 'react';
import { FaStar } from "react-icons/fa";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  starBase: {
    cursor: 'pointer',
    transition: 'color 200ms',
    position: 'absolute',
    top: '25%',
    left: '50%',
    transform: 'translate(-50%, -75%)',
  },
  starFill: {
    zIndex: 1,
    color: '#ffc107'
  },
  starMask: {
    zIndex: 2,
    color: '#e4e5e9',
    overflow: 'hidden',
    width: 'calc(100% - var(--fill-percent))',
    transform: 'translate(calc(50% - var(--fill-percent)/2), -75%)'
  }
}));

const StarRating = ({ percent = 0 }) => {
  const classes = useStyles();
  const starMaskStyle = {
    '--fill-percent': `${percent}%`
  };

  return (
    <>
      <div className={`${classes.starBase} ${classes.starFill}`}>
        <FaStar size={200} />
      </div>
      <div className={`${classes.starBase} ${classes.starMask}`} style={starMaskStyle}>
        <FaStar size={200} />
      </div>
    </>
  )
}

export default StarRating;

关键修改说明 #

1. Props处理：将组件参数改为解构形式({ percent = 0 })，默认值设为0避免无参数时出错，使用组件时只需传入<StarRating percent={79} />即可。
2. 样式优化：
   • 提取通用样式starBase，避免重复代码
   • 给灰色星星容器添加overflow:hidden，并通过CSS变量--fill-percent动态计算容器宽度
   • 调整灰色容器的transform属性，确保它始终对齐到星星的右侧未填充区域
3. 动态样式注入：通过style属性将百分比转换为CSS变量，实现响应式的裁剪效果

另一种可选方案（使用clip-path） #

如果你更倾向于直接裁剪星星元素而非容器，可以用clip-path替代overflow的方式，修改灰色星星的样式：

const starMaskStyle = {
  clipPath: `inset(0 0 0 ${percent}%)`
};

这种方式不需要调整容器宽度，直接通过裁剪路径隐藏灰色星星的左侧percent%区域，效果完全一致。

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