对倾斜的 div 应用渐变答案

【问题标题】：Applying a gradient to a inclined div对倾斜的 div 应用渐变
【发布时间】：2021-12-30 11:13:54
【问题描述】：

**在 sn-p 中查看在某个角度具有颜色渐变的图像。我无法从上到下进行颜色渐变**

子div应该有背景：linear-gradient(0deg, #FF6633 0%, #CC0066 100%)，一些倾斜的角度和颜色应该是从上到下的渐变。

任何解决方案对于父 div 背景：linear-gradient(180deg, #F1F1F1 0%, #FFFFFF 100%); , 对于子 div 背景：linear-gradient(0deg, #FF6633 0%, #CC0066 100%) 和一些倾斜角度

谢谢。

  .parent{
        width: 100%;
        height: 900px;
        background: linear-gradient(180deg, #F1F1F1 0%, #FFFFFF 100%);
    }
    .child{
        width:50%;
        height: 900px;
        float: right;
         background: linear-gradient(75deg  , transparent 50%, #FF6633 0%, #CC0066 100%);

   }

   <div class=parent>
          <div class=child>
    </div>

【问题讨论】：

标签： html css linear-gradients

【解决方案1】：

默认正文标签将有边距。我们可以删除它。请检查以下代码

<!DOCTYPE html>
<html>
<head>    
</head>
<style>
   body{
      padding: 0;
      margin: 0;
   }
 .parent{
        width: 100%;
        height: 900px;
        background: linear-gradient(180deg, #F1F1F1 0%, #FFFFFF 100%);
    }
    .child{
        width:50%;
        height: 900px;
        float: right;
         background: linear-gradient(75deg  , transparent 50%, #FF6633 0%, #CC0066 100%);

   }
</style>
<body>
<div class=parent>
          <div class=child>
    </div>
</body>
</html>

【讨论】：