使用SVG的線性兩種顏色的平滑和清晰漸變

Question

我嘗試了所有的CSS技巧，使線性漸變我如下body標記。

但是CSS漸變並不尖銳，因此我嘗試了以下技巧，

<body><div class="bg"></div></body>

.bg{ 
  background-color:red; 
  width:3000px; 
  height:3000px;
  overflow:hidden
} 
.bg:before{ 
  left: 7%; 
  top:-20%; 
  width:100%; 
  height:100%; 
  transform:rotate(25deg) 
}

因此，我實現了綠色矩形。 我現在可以看到陡峭的漸變。

但是我必須編寫media查詢來調整每種尺寸的旋轉。

而且我認為，如果我們可以在該div上使用SVG從(0, 0)到(body width, body height)繪制一個三角形，那么我真的可以做出一個響應線性漸變。

但是我對SVG還是很陌生，如何使用SVG實現響應的反直角三角形？

簡而言之，我想要一個響應式的兩種顏色的smooth & sharp漸變背景。

更新：

完整的CSS代碼在這里。

div.bg {
  margin-top: -50px;
  position: fixed;
  height: 1500px;
  width: 3500px;
  overflow: hidden;
  background-color: @bg-gradient-color-1;
  background-size: cover;
  z-index: -999999;
}

.bg:before {
  content: '';
  position: fixed;
  width: 200%;
  height: 200%;
  background-color: @bg-gradient-color-2;
  z-index: -999999;
}

@media only screen and (min-width: 1320px) {
  .bg:before {
    left: 0%;
    top: -106%;
    transform: rotate(27deg);
  }
}

Answer 1

您可以使用SVG中的兩個path元素來實現此目的，然后根據需要為其填充。

 svg path#green { fill: green; } svg path#red { fill: red; } div.bg { position: relative; height: 100vh; width: 100%; } div.bg svg { position: absolute; height: 100%; width: 100%; }

 <div class='bg'> <svg viewBox='0 0 100 100' preserveAspectRatio='none'> <path d='M0,0 L100,100 100,0z' id='green' /> <path d='M0,0 L0,100 100,100z' id='red' /> </svg> </div>

原始答案：（由於疏忽忽略了閱讀不流暢的部分）

您可以僅使用使用to [side] [side]語法的漸變來完成此操作。 但是正如您已經說過的，當尺寸較大時，它的確會沿對角線產生鋸齒狀的邊緣。

 .bg { background: linear-gradient(to top right, red 50%, green 50%); height: 100vh; width: 100%; }

 <div class="bg"></div>

Answer 2

生成所需SVG的簡單方法可能是使用Harry的方法-具有兩個三角形-或在矩形頂部的三角形。

但是，也可以使用漸變來完成。 這種方法的一個優勢是，在兩種顏色的邊緣重合的情況下，您不會遇到任何抗鋸齒問題。

 svg stop.color1 { stop-color: green; } svg stop.color2 { stop-color: red; } div.bg { width: 100vw; height: 60vw; } div.bg svg { width: 100%; height: 100%; }

 <div class='bg'> <svg viewBox='0 0 100 100' preserveAspectRatio="none"> <defs> <linearGradient id="grad" x2="1" y2="1"> <stop offset="0.5" class="color1"/> <stop offset="0.5" class="color2"/> </linearGradient> </defs> <rect width="100" height="100" fill="url(#grad)"/> </svg> </div>

使用SVG的線性兩種顏色的平滑和清晰漸變

問題描述

2 個解決方案

解決方案1
5 已采納 2016-02-23 11:11:26

解決方案2
3 2016-02-23 11:44:22

使用SVG的線性兩種顏色的平滑和清晰漸變

問題描述

2 個解決方案

解決方案1 5 已采納 2016-02-23 11:11:26

解決方案2 3 2016-02-23 11:44:22

解決方案1
5 已采納 2016-02-23 11:11:26

解決方案2
3 2016-02-23 11:44:22