我有一个元素,其:before样式必须根据计算进行修改.
export class Content extends React.Component {
render() {
return (
<div className="ring-base">
<div className="ring-left" style={{/* Change here */}}></div>
<div className="ring-right" style={{/* Change here */}}></div>
<div className="ring-cover">
<div className="ring-text">10%</div>
</div>
</div>
);
}
}
Run Code Online (Sandbox Code Playgroud)
CSS代码:
.ring-base {
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
background: red;
transform: rotate(90deg);
overflow:hidden;
}
.ring-cover {
position: absolute;
height: 180px;
width: 180px;
background: #fff;
border-radius: 50%;
top: 5%;
left: 5%;
}
.ring-cover .ring-text {
position: absolute;
width: 100%;
height: 100%;
text-align: …Run Code Online (Sandbox Code Playgroud)