如何在CSS3中获得旋转椭圆渐变?
我试图得到这个渐变背景(用Illustrator制作): 但我得到的只是: 其CCS3代码如下:如何在CSS3中获得旋转椭圆渐变?,css,gradient,ellipse,Css,Gradient,Ellipse,我试图得到这个渐变背景(用Illustrator制作): 但我得到的只是: 其CCS3代码如下: background: radial-gradient(ellipse farthest-corner at 5% 5%, #B90000, #2B0000); 如何获得所需的背景?您可以将背景放置在旋转的伪元素之前 我通过反复试验得出了比例,我相信有一种更有效的方法: div { position: relative; overflow: hidden; width: 600px
background: radial-gradient(ellipse farthest-corner at 5% 5%, #B90000, #2B0000);
如何获得所需的背景?您可以将背景放置在旋转的
伪元素之前
我通过反复试验得出了比例,我相信有一种更有效的方法:
div {
position: relative;
overflow: hidden;
width: 600px;
height: 300px;
border: 1px solid black;
}
div::before {
content: "";
position: absolute;
z-index: -1;
width: 250%;
height: 250%;
top: -40%;
left: -50%;
background: radial-gradient(ellipse 30% 20% at 30% 50%, #B90000, #2B0000);
transform: rotate(30deg);
}