Реагировать слайдером градиента (компонент рейтинга) с закругленными углами

Question

Я совершенно новый в CSS и React. Моя задача сделать компонент как на картинке ниже.

Это то, что я сделал, покрыв градиентный div белым цветом и непрозрачностью как 0.2. Цвет не имеет значения.

Можете ли вы помочь мне сделать закругленную границу внутри слайдера, как на первом изображении?

Добавление недостающего кода. Я изменил пример Рейда Бенджамина.

Вот мой код:

class MySlider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rating: this.props.rating || null,
      tempRating: null
    };
  }

  rate = (rating) => {
    this.setState({
      rating,
      tempRating: rating
    });
  };

  starOver = (rating) => {
    this.setState({
      rating,
      tempRating: this.state.rating
    });
  };

  starOut = () => {
    this.setState({
      rating: this.state.tempRating
    });
  };

  render() {
    const elements = [];

    for (let i = 0; i < 5; i++) {
      let cssSelectorClass = 'my-slider__item';

      if (this.state.rating !== null && this.state.rating >= i) {
        cssSelectorClass += ' --selected';
      }

      elements.push(
        <div
          className={cssSelectorClass}
          onClick={this.rate.bind(this, i)}
          onMouseOver={this.starOver.bind(this, i)}
          onMouseOut={this.starOut} />
      );
    }

    return (
      <div>
        <div className="back" />
        <div className="my-slider">
          {elements}
        </div>
      </div>
    );
  }
}

class App extends React.Component {
    render() {
        return <MySlider value={2} />
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

.my-slider {
  display: flex;
  position: relative;
  z-index: 1;
}
.my-slider__item {
    height: 30px;
    width: 30px;
    background-color: white;
    opacity: 0.8;
}

.my-slider__item:hover {
      cursor: pointer;
    }

.--selected {
      opacity: 0;
}

.back {
  opacity: 0.5;
  background-image: linear-gradient(to right, blue, red);
  position: absolute;
  z-index: 0;
  width: 150px;
  height: 30px;
  background-color: #00ccff;
  border-radius: 0 20px 20px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='root'></div>

ен / vNVwPW

Answer 1

Без кода сложно ответить, особенно потому, что мы не знаем, как построен ваш Компонент.
В любом случае, я просто "попробовал и гость": дайте мне знать, если это поможет вам:

class ProgressBar extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <div className="progressBar">
                <div
                    className="currentProgress"
                    style={{width: `calc(${this.props.value}%)`}}/>
            </div>            
        );
    }
}

class App extends React.Component {
    interval;
    
    constructor(props) {
        super(props);
        
        this.state = {value: 75};
    }
    
    componentDidMount() {
        this.interval = setInterval(() => {
            this.setState({ value: Math.floor(Math.random() * (75-65+ 1) + 65)});
        }, 500)
    }
    
    componentWillUnmount() {
        clearInterval(this.interval);
    }
    
    render() {
        return <ProgressBar value={this.state.value} />
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    font-family: 'Montserrat', sans-serif;
}

.progressBar {
    width: 500px;
    height: 50px;
    background: #FDE9EC;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.currentProgress {
    height: inherit;
    background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='root'></div>

Как видите, это довольно просто: ProgressBar Компонент рендерит два div с. Первый - это индикатор выполнения, в то время как внутренний div - текущий прогресс, заданный значением, переданным как props.
Для границы, поскольку у нас есть родительская / дочерняя иерархия, мы можем использовать inherit значение CSS.