Question

我需要做这个显示 2 个聚合值的统计。它显示了每个月的总值。我已经在引导程序中完成了这项工作。每个月都是一列，里面有一个 div，有一定的高度，具体取决于这个值的百分比。

这很好用，但我不知道如何让值的两条黑线像这样以线性方式上升。我现在看起来像这样：

我以为我可以用线性背景为 div 做这件事，但我似乎找不到方法。我需要的是绿色、第一条黑线、第二条绿色和第二条黑线的左起点和右终点（以像素为单位）。有没有办法实现这一目标或有更好的方法？

Answer 1

这是一个具有多个背景和 CSS 变量的想法

class Lobby extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: '',
            messages: []
        }
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.messages !== this.state.messages){
            const handleNewMessage = newMessage => this.setState({messages: ([...messages, newMessage])})
            socket.on('chat.message', handleNewMessage)
            return () => socket.off('chat.message', handleNewMessage)
        }
    }
    
    handleFormSubmit = event => {
        event.preventDefault()
        if (message.trim()) {
            socket.emit('chat.message', {
                userid: myId,
                lobby,
                username: username,
                message
            })
            this.setState({message: ''});
        }
    }

    handleInputChange = event => this.setState({message: event.target.value});

    handleTesteChange = event => this.setState({message: event.target.value});

    handleTesteSubmit = event => {
        event.preventDefault()
        if (message.trim()) {
            socket.emit('chat.message', {
                userid: myId,
                message
                
            })

            this.setState({message: ''});
        
        }
    }
    
}

.box {
   --p1_start:20px;
   --p1_end:80px;
   
   --p2_start:80px;
   --p2_end:120px;
   border:1px solid;
   height:200px;
   width:150px;
   display:inline-block;
   background:
     /**/
     linear-gradient(to bottom right,transparent calc(50% - 5px),#000 calc(50% - 4px) calc(50% - 1px), green 50%)
       bottom var(--p1_start) left 0/110% calc(var(--p1_end) - var(--p1_start)),  
     linear-gradient(green 0 0) 
       bottom/100% var(--p1_start),
     /**/
     /**/
     linear-gradient(to bottom right,transparent calc(50% - 5px),#000 calc(50% - 4px) calc(50% - 1px), red 50%)
       bottom var(--p2_start) left 0/110% calc(var(--p2_end) - var(--p2_start)),  
     linear-gradient(red 0 0) 
       bottom/100% var(--p2_start);
     /**/
   background-repeat:no-repeat;
}

这可能与线性背景吗？

1 个答案: