如何旋转长方体阴影

Question

如何旋转长方体阴影？

我现在有这个：

#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度。

Answer 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>

Answer 2

只需添加值为rotate(90deg)的transform属性。

#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>