如何在React中使用CSS基于百分比填充非四边形形状(即星形)?

Question

我正在尝试创建一个React组件，该组件以两种色调的星星形式显示评级百分比。

交货。给定输入评级为79%，然后我将显示一颗星星，左边的79%为金色，右边的21%为灰色。

到目前为止，我有两个独立的星星从字体Awesome在同一位置(一金一灰)

我的沙盒在这里，代码在下面:

import React from 'react';
import { FaStar } from "react-icons/fa";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
starFill: {
cursor: 'pointer',
transition: 'color 200ms',
position: 'absolute',
top: '25%',
left: '50%',
transform: 'translate(-50%, -75%)',
zIndex: 1
},
starContainer: {
cursor: 'pointer',
transition: 'color 200ms',
position: 'absolute',
top: '25%',
left: '50%',
transform: 'translate(-50%, -75%)',
zIndex: 2
}
}));
const StarRating = (percentRating) => {
const classes = useStyles();

console.log(percentRating);
return (
<React.Fragment>
<div className={classes.starFill}>
<FaStar color='#ffc107' size={200} />
</div>
<div className={classes.starContainer}>
<FaStar color='#e4e5e9' size={200} />
</div>
</React.Fragment>
)
}
export default StarRating;

Answer 1

所以我设法通过切换星星的zIndexes来完成我的目标，然后将星星的宽度更改为百分比，并将overflow:hidden添加到它的样式中。

我的沙盒在这里，代码在下面:

import React from 'react';
import { FaStar } from "react-icons/fa";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
starFill: {
cursor: 'pointer',
transition: 'color 200ms',
position: 'absolute',
top: '25%',
left: '50%',
transform: 'translate(-50%, -75%)',
zIndex: 2,
},
starContainer: {
cursor: 'pointer',
transition: 'color 200ms',
position: 'absolute',
top: '25%',
left: '50%',
transform: 'translate(-50%, -75%)',
zIndex: 1,
}
}));
const StarRating = ({ rating = 100, size = 200, ...props }) => {
const classes = useStyles();
rating = (rating / 100) * size;
return (
<React.Fragment>
<div className={classes.starFill}>
<div style={{ width: rating, overflow: 'hidden' }}>
<FaStar color='#ffc107' size={size} />
</div>
{/* transparent div to reserve the complementary spacing */}
<div style={{ width: size }}>
</div>
</div>
<div className={classes.starContainer}>
<FaStar color='#e4e5e9' size={size} />
</div>
</React.Fragment>
)
}
export default StarRating;