将此渐变图像转换为 CSS 渐变
Converting this gradient image to CSS gradients
我正在尝试使用 CSS 生成下面的渐变图像。但是，我正在努力对齐。您会在我的代码片段中注意到这个问题。我试过对它们进行绝对定位，但这只会让事情变得更糟。
.gradients {
position: relative;
width: 100%;
}
.gradients div {
height: 40px;
}
.bottom-gradient {
-ms-transform: rotate(0.6deg);
-webkit-transform: rotate(0.6deg);
transform: rotate(0.6deg);
background: -moz-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(37, 52, 47, 0.9)), color-stop(100%, rgba(3, 95, 26, 0.9)));
background: -webkit-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: -o-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: -ms-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: linear-gradient(to right, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80414c46', endColorstr='#80035f1a', GradientType=1);
}
.top-gradient {
-ms-transform: rotate(0.6deg);
-webkit-transform: rotate(0.6deg);
transform: rotate(0.10deg);
background: -moz-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3, 95, 26, 0.9)), color-stop(100%, rgba(37, 52, 47, 0.9)));
background: -webkit-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: -o-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: -ms-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: linear-gradient(to right, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80035f1a', endColorstr='#80414c46', GradientType=1);
}
<div class="gradients">
<div class="top-gradient"></div>
<div class="bottom-gradient"></div>
</div>
position: absolute 或负值 margin 可以，但需要 hard-coded 值。更灵活的替代方法是将 transform: translateY(-100%) 添加到 .bottom-gradient。
因为您已经在此元素上添加了 transform: rotate(0.6deg)，您只需将 translateY 附加到它即可：
.bottom-gradient { transform: rotate(0.6deg) translateY(-100%) }
为了更接近地复制图像，我还进行了以下更改：
- 将渐变的
rotation 更改为 1deg 和 -1deg。
- 将
height 更改为 16px；
.gradients {
position: relative;
width: 100%;
}
.gradients div {
height: 16px;
}
.bottom-gradient {
-ms-transform: rotate(-1deg) translateY(-100%);
-webkit-transform: rotate(-1deg) translateY(-100%);
transform: rotate(-1deg) translateY(-100%);
background: -moz-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(37, 52, 47, 0.9)), color-stop(100%, rgba(3, 95, 26, 0.9)));
background: -webkit-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: -o-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: -ms-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: linear-gradient(to right, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80414c46', endColorstr='#80035f1a', GradientType=1);
}
.top-gradient {
-ms-transform: rotate(1deg);
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
background: -moz-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3, 95, 26, 0.9)), color-stop(100%, rgba(37, 52, 47, 0.9)));
background: -webkit-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: -o-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: -ms-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: linear-gradient(to right, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80035f1a', endColorstr='#80414c46', GradientType=1);
}
<div class="gradients">
<div class="top-gradient"></div>
<div class="bottom-gradient"></div>
</div>
您可以仅使用伪元素并通过一次定义梯度来优化您的代码。
.gradients {
position: relative;
height: 40px;
margin:40px 0;
}
.gradients:before,
.gradients:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transform: rotate(2deg);
background: linear-gradient(to right, rgba(37, 52, 47, 0.9), rgba(3, 95, 26, 0.9));
}
.gradients:after {
/* since it's the same gradient in the other direction, you can simply make a mirror image of it*/
transform:scaleX(-1) rotate(2deg);
}
<div class="gradients">
</div>
你也可以考虑skew()而不是旋转以获得不同的效果，可能更接近你想要的。注意边缘的不同：
.gradients {
position: relative;
height: 40px;
margin:40px 0;
}
.gradients:before,
.gradients:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transform: skewY(2deg);
background: linear-gradient(to right, rgba(37, 52, 47, 0.9), rgba(3, 95, 26, 0.9));
}
.gradients:after {
/* since it's the same gradient in the other direction, you can simply make a mirror image of it*/
transform:scaleX(-1) skewY(2deg);
}
<div class="gradients">
</div>
我还怀疑您想要一些响应式的东西，这意味着当您调整 window 大小时，两个渐变之间的距离不应改变（上述解决方案不是这种情况）。这样做是一个依赖 SVG 和背景的想法：
.gradients {
position: relative;
height: 80px;
margin:40px 0;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 25 30" ><defs><linearGradient id="one" ><stop offset="0%" stop-color="rgba(37, 52, 47, 0.9)"/><stop offset="100%" stop-color="rgba(3, 95, 26, 0.9)" /></linearGradient><linearGradient id="two" ><stop offset="0%" stop-color="rgba(3, 95, 26, 0.9)" /><stop offset="100%" stop-color="rgba(37, 52, 47, 0.9)"/></linearGradient></defs><polygon points="25,7 25,25 0,18 0,0" fill="url(%23one)"/><polygon points="25,0 25,18 0,25 0,7" fill="url(%23two)"/></svg>');
background-size:100%;
}
<div class="gradients">
</div>
这里是用不同颜色扩展的 SVG 代码，以便更好地理解：
svg {
width:100%;
height:100px;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 25 30">
<defs>
<linearGradient id="one" >
<stop offset="0%" stop-color="blue"/>
<stop offset="100%" stop-color="red" />
</linearGradient>
<linearGradient id="two" >
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="purple"/>
</linearGradient>
</defs>
<!-- update the value 7 and 18 by keeping it the same between both polygon -->
<polygon points="25,7 25,25 0, 18 0, 0" fill="url(#one)"/>
<polygon points="0, 7 0, 25 25,18 25,0" fill="url(#two)"/>
</svg>
我正在尝试使用 CSS 生成下面的渐变图像。但是，我正在努力对齐。您会在我的代码片段中注意到这个问题。我试过对它们进行绝对定位，但这只会让事情变得更糟。
.gradients {
position: relative;
width: 100%;
}
.gradients div {
height: 40px;
}
.bottom-gradient {
-ms-transform: rotate(0.6deg);
-webkit-transform: rotate(0.6deg);
transform: rotate(0.6deg);
background: -moz-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(37, 52, 47, 0.9)), color-stop(100%, rgba(3, 95, 26, 0.9)));
background: -webkit-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: -o-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: -ms-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: linear-gradient(to right, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80414c46', endColorstr='#80035f1a', GradientType=1);
}
.top-gradient {
-ms-transform: rotate(0.6deg);
-webkit-transform: rotate(0.6deg);
transform: rotate(0.10deg);
background: -moz-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3, 95, 26, 0.9)), color-stop(100%, rgba(37, 52, 47, 0.9)));
background: -webkit-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: -o-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: -ms-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: linear-gradient(to right, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80035f1a', endColorstr='#80414c46', GradientType=1);
}
<div class="gradients">
<div class="top-gradient"></div>
<div class="bottom-gradient"></div>
</div>
position: absolute 或负值 margin 可以，但需要 hard-coded 值。更灵活的替代方法是将 transform: translateY(-100%) 添加到 .bottom-gradient。
因为您已经在此元素上添加了 transform: rotate(0.6deg)，您只需将 translateY 附加到它即可：
.bottom-gradient { transform: rotate(0.6deg) translateY(-100%) }
为了更接近地复制图像，我还进行了以下更改：
- 将渐变的
rotation更改为1deg和-1deg。 - 将
height更改为16px；
.gradients {
position: relative;
width: 100%;
}
.gradients div {
height: 16px;
}
.bottom-gradient {
-ms-transform: rotate(-1deg) translateY(-100%);
-webkit-transform: rotate(-1deg) translateY(-100%);
transform: rotate(-1deg) translateY(-100%);
background: -moz-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(37, 52, 47, 0.9)), color-stop(100%, rgba(3, 95, 26, 0.9)));
background: -webkit-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: -o-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: -ms-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
background: linear-gradient(to right, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80414c46', endColorstr='#80035f1a', GradientType=1);
}
.top-gradient {
-ms-transform: rotate(1deg);
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
background: -moz-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3, 95, 26, 0.9)), color-stop(100%, rgba(37, 52, 47, 0.9)));
background: -webkit-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: -o-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: -ms-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
background: linear-gradient(to right, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80035f1a', endColorstr='#80414c46', GradientType=1);
}
<div class="gradients">
<div class="top-gradient"></div>
<div class="bottom-gradient"></div>
</div>
您可以仅使用伪元素并通过一次定义梯度来优化您的代码。
.gradients {
position: relative;
height: 40px;
margin:40px 0;
}
.gradients:before,
.gradients:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transform: rotate(2deg);
background: linear-gradient(to right, rgba(37, 52, 47, 0.9), rgba(3, 95, 26, 0.9));
}
.gradients:after {
/* since it's the same gradient in the other direction, you can simply make a mirror image of it*/
transform:scaleX(-1) rotate(2deg);
}
<div class="gradients">
</div>
你也可以考虑skew()而不是旋转以获得不同的效果，可能更接近你想要的。注意边缘的不同：
.gradients {
position: relative;
height: 40px;
margin:40px 0;
}
.gradients:before,
.gradients:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transform: skewY(2deg);
background: linear-gradient(to right, rgba(37, 52, 47, 0.9), rgba(3, 95, 26, 0.9));
}
.gradients:after {
/* since it's the same gradient in the other direction, you can simply make a mirror image of it*/
transform:scaleX(-1) skewY(2deg);
}
<div class="gradients">
</div>
我还怀疑您想要一些响应式的东西，这意味着当您调整 window 大小时，两个渐变之间的距离不应改变（上述解决方案不是这种情况）。这样做是一个依赖 SVG 和背景的想法：
.gradients {
position: relative;
height: 80px;
margin:40px 0;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 25 30" ><defs><linearGradient id="one" ><stop offset="0%" stop-color="rgba(37, 52, 47, 0.9)"/><stop offset="100%" stop-color="rgba(3, 95, 26, 0.9)" /></linearGradient><linearGradient id="two" ><stop offset="0%" stop-color="rgba(3, 95, 26, 0.9)" /><stop offset="100%" stop-color="rgba(37, 52, 47, 0.9)"/></linearGradient></defs><polygon points="25,7 25,25 0,18 0,0" fill="url(%23one)"/><polygon points="25,0 25,18 0,25 0,7" fill="url(%23two)"/></svg>');
background-size:100%;
}
<div class="gradients">
</div>
这里是用不同颜色扩展的 SVG 代码，以便更好地理解：
svg {
width:100%;
height:100px;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 25 30">
<defs>
<linearGradient id="one" >
<stop offset="0%" stop-color="blue"/>
<stop offset="100%" stop-color="red" />
</linearGradient>
<linearGradient id="two" >
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="purple"/>
</linearGradient>
</defs>
<!-- update the value 7 and 18 by keeping it the same between both polygon -->
<polygon points="25,7 25,25 0, 18 0, 0" fill="url(#one)"/>
<polygon points="0, 7 0, 25 25,18 25,0" fill="url(#two)"/>
</svg>