生成带渐变的矩形 CSS

Question

如何在 CSS 中使用渐变生成矩形？

我的期望就像这张照片

Answer 1

您可以尝试通过将 div 和 class 作为矩形来制作矩形，

.rectangle {
    width: 400px;
    height: 200px;
    background: linear-gradient(to left bottom, rgb(84, 255, 84), #329600, rgb(124, 124, 124));
  }

你也可以改变颜色的方向。

Answer 2

我猜你正在寻找的是线性渐变。 我建议您尝试这个 web 站点： https://cssgradient.io/以轻松可视化 css 属性的渲染

背景：线性渐变

我试图重现你的例子，我得到了这个 css 代码

 .exemple{ width:200px; height: 150px; background: rgb(40,83,62); background: -moz-linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%); background: linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#28533e",endColorstr="#ffffff",GradientType=1); }

 <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <title>Page Title</title> <body> <div class="exemple"></div> </body> </html>

希望这可以帮助 ！！