Блог

Главная - Вопросы по программированию - Как я могу повернуть box-shadow?

Как я могу повернуть box-shadow?

#html #css

#HTML #css

Вопрос:

Как я могу повернуть box-shadow?

В настоящее время у меня есть это:

 #gradients {
  width: 52px;
  display: block;
  height: 30px;
  background: #22b14c;
  box-shadow: #b5e61d 52px 0px 0px 0px, 
              #fff200 104px 0px 0px 0px, 
              #ffc90e 156px 0px 0px 0px, 
              #ff7f27 208px 0px 0px 0px, 
              #ed1c24 260px 0px 0px 0px;
}  
 <div id="gradients"></div>

Но мой желаемый результат — повернуть его на 90 градусов.

Комментарии:

1. преобразование: поворот (90 градусов);?

2. Вы спрашиваете, как повернуть только тень, оставив элемент в исходном положении? Вы должны пересмотреть, чтобы сделать это более понятным.

Ответ №1:

Вы можете использовать transform свойство и использовать rotate(90deg) 

 #gradients {
  transform: rotate(90deg);
  width: 52px;
  display: block;
  height: 30px;
  background: #22b14c;
  box-shadow: #b5e61d 52px 0px 0px 0px, #fff200 104px 0px 0px 0px, #ffc90e 156px 0px 0px 0px, #ff7f27 208px 0px 0px 0px, #ed1c24 260px 0px 0px 0px;
}  
 <div id="gradients"></div>

Ответ №2:

Просто добавьте transform свойство со значением rotate(90deg) .

 #gradients {
    width: 52px;
    display: block;
    height: 30px;
    background: #22b14c;
    box-shadow: #b5e61d 52px 0px 0px 0px, 
        #fff200 104px 0px 0px 0px, 
        #ffc90e 156px 0px 0px 0px, 
        #ff7f27 208px 0px 0px 0px, 
        #ed1c24 260px 0px 0px 0px;
    transform: rotate(90deg);
}  
 <div id="gradients"></div>