两个梯度，两个截然不同的部分，只有一个div元素 [英] Two gradients with two distinct sections with just one div element

问题描述

我想知道是否可以仅使用一个div 来创建背景效果，如下图所示.

I was wondering if it is possible to create a background effect like in the image below using just one div.

我知道如何在两个div中实现它，但是如果可以在一个div中完成(也许使用:after ???)，我的情况将使其变得非常容易.渐变的代码是:

I know how to achieve it with two divs, but my situation would make it really easy if it could be done in one div (maybe using :after ???). The code for the gradients is:

.bg-green {
    background-image: linear-gradient(-180deg, #95D428 0%, #20560B 100%);
}

.bg-red {
    background-image: linear-gradient(-180deg, #F5515F 0%, #8E0A1E 100%; 
}

谢谢:)

推荐答案

您可以获得这种效果，但是您需要将div的溢出设置为隐藏，并在之后的伪类中设置背景

You can get this effect, but you will need to set overflow hidden on the div and to set the background in a after pseudo class

.test {
    width: 400px;
    height: 300px;
    border: solid 1px black;
    position: relative;
    overflow: hidden;
}

.test:after {
    content: "";
    position: absolute;
    width: 160%;
    height: 160%;
    top: -30%;
    left: -30%;
    background-image: linear-gradient(-210deg, #95D428 0%, #20560B 100%), linear-gradient(-210deg, #F5515F 0%, #8E0A1E 100%);
    background-position: top left, top right;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    -webkit-transform: rotate(30deg);
}

<div class="test"></div>

旋转后盖以获得倾斜的间距.尺寸必须更大，以免显示缺失的角.

The after is rotated to get the inclined separation. The dimensions need to be bigger so as not to show missing corners.

然后，将2个线性渐变分配为2个单独的背景图像，再倾斜30度以补偿基本倾斜度

And then, you assign the 2 linear gradients as 2 separate background-images,inclined an additional 30deg to compensate for the base inclination

这篇关于两个梯度，两个截然不同的部分，只有一个div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！