Блог

Главная - Вопросы по программированию - Форматирование CSS только часть ширины div

Форматирование CSS только часть ширины div

#html #css

#HTML #css

Вопрос:

Я создал панель громкости HTML:

 .volume_bar {
  background: #A5D5FF;
  border-radius: 20px;
  height: 12px;
}  
 <div class="volume_bar"></div>

Я пытаюсь отформатировать эту панель громкости таким образом, чтобы при наличии дохода от объема отображать объем на панели другим цветом. Итак, это выглядит так:
введите описание изображения здесь

Я правильно определил входные коды объема чтения. Я просто пытаюсь разобраться в интерфейсе. Один из способов, которым я думал добиться этого, — отформатировать только часть div. Таким образом, чтобы 20% ширины было желтым, а остальное — синим. Возможно ли отформатировать только часть ширины div с помощью CSS?

Ответ №1:

Просто измените свойство width класса .volume с помощью javascript, чтобы заставить его работать.

 document.querySelector(".volume").style.width="50%";  
 .volume_bar {
  background: #A5D5FF;
  border-radius: 20px;
  height: 12px;
}

.volume {
  background: #ffd105;
  width: 25%;
  height: 100%;
  border-radius: 20px;
  font-size:10px;
  text-align:center;
}  
 <div class="volume_bar">
  <div class="volume"></div>
</div>

Ответ №2:

 const volume_bar = document.querySelector('.volume_bar');
const volume_control = document.querySelector('.volume_control');
const rect = volume_bar.getBoundingClientRect();    

volume_bar.addEventListener('mousemove', e=>{
    let per = (e.clientX - rect.x) / (rect.width) * 100; 
    volume_control.style.width = per   '%';
});  
 .volume_bar,
.volume_control {
  border-radius: 20px;
  height: 12px;
}

.volume_bar{
    background: #A5D5FF; 
}

.volume_control{
    background: red;
    width: 0;
}  
 <div class="volume_bar"><div class="volume_control"></div></div>

Ответ №3:

Чтобы ответить на ваш вопрос, да, вы можете оформить div так, чтобы слева был один цвет, справа другой. Liner-gradient может создать этот эффект. Ваша проблема — закругленный край левой стороны — для этого, я думаю, вам нужен второй элемент или псевдоселектор.

Использование linear-gradient() для упрощения эффекта, но без закругления края

 .volume {
  width: 80%;
  height: 50px;
  border-radius: 25px;
  background: linear-gradient(90deg, blue 30%, yellow 30%);
}  
 <div class="volume"></div>

Использование псевдоселектора:

 .volume {
  width: 80%;
  height: 50px;
  border-radius: 25px;
  background: rgb(253 216 53);
}

.volume::after {
  height: 100%;
  width: 30%;
  border-radius: 25px;
  background: rgb(3 169 244);
  content: "";
  display: block;
}  
 <div class="volume"></div>