Можно ли создать в CSS следующий градиент:
Создание градиента CSS3 с 4 углами
Ответ 1
в вашем случае
Метод 1:
div{
overflow: hidden;
background: #f06;
background: linear-gradient(45deg, #fff722, #ff26f9);
min-height: 100%;
width: 256px;
height: 256px;
position: relative;
z-index: 1;
box-shadow: inset -20px 0 38px -18px #ff26f9,inset -3px -13px 65px -18px yellow;
}
div:before,div:after{
content:'';
position:absolute;
width:100%;
height:100%;
}
div:before{
background: red;
box-shadow: 0 0 140px 64px red;
z-index:2;
top: -96%;
left: -72%;
opacity: 0.8;
}
div:after {
background: white;
z-index: 3;
bottom: -96%;
right: -72%;
box-shadow: 0 0 140px 64px white;
opacity: 1;
border-radius: 100%;
}
Метод 2:
div{
overflow: hidden;
background: #f06;
background: linear-gradient(45deg, #fff722, #ff26f9);
min-height: 100%;
width:256px;
height:256px;
position:relative;
z-index:1;
}
div:before,div:after{
content:'';
position:absolute;
width:100%;
height:100%;
}
div:before{
background: red;
box-shadow: 0 0 140px 64px red;
z-index:2;
top: -96%;
left: -72%;
opacity: 0.8;
}
div:after {
background: white;
z-index: 3;
bottom: -96%;
right: -72%;
box-shadow: 0 0 140px 64px white;
opacity: 1;
border-radius: 100%;
}
Метод 3: несколько фона:
div{
background: #f06;
background: linear-gradient(45deg, #fff722, #ff26f9),linear-gradient(142deg, transparent, white),linear-gradient(108deg, red, transparent);
min-height: 100%;
width:256px;
height:256px;
position:relative;
z-index:1;
}
Метод 4: псевдоэлемент
div{
background: #f06;
background: linear-gradient(45deg, #fff722, #ff26f9);
min-height: 100%;
width:256px;
height:256px;
position:relative;
z-index:1;
}
div:before,div:after{
content:'';
position:absolute;
width:100%;
height:100%;
opacity: 0.8;
}
div:before{
background: linear-gradient(108deg, red, transparent);
z-index:2;
top:0;
left:0;
}
div:after{
background: linear-gradient(142deg, transparent, white);
z-index:3;
bottom:0;
right:0;
}
разметка:
<div></div>
Метод 5:
div{
overflow: hidden;
background: #f06;
background: linear-gradient(45deg, #fff722, #ff26f9);
min-height: 100%;
width:256px;
height:256px;
position:relative;
z-index:1;
}
div:before,div:after{
content:'';
position:absolute;
width:100%;
height:100%;
}
div:before{
background: linear-gradient(108deg, red, transparent);
z-index:2;
top:0;
left:0;
opacity: 0.8;
}
div:after {
background: white;
z-index: 3;
bottom: -96%;
right: -72%;
box-shadow: 0 0 110px 54px white;
opacity: 1;
border-radius: 100%;
}
Обновление: большое спасибо Ana-Maria Tudor < 3
body{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
}
body:before {
content: '';
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
display: block;
width: 100%;
height: 600px;
border-radius: 0%;
background:
radial-gradient(circle at 50% 0,
rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%),
radial-gradient(circle at 6.7% 75%,
rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%),
radial-gradient(circle at 93.3% 75%,
rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);
}
Ответ 2
Используя mask-image вместе с линейными градиентами, мы можем выполнить бесшовный, угловой градиент, для которого требуется только псевдо-элемент ::after.
HTML
<div id="quad">
</div>
SASS
@mixin QuadVertexColors($v0, $v1, $v2, $v3) {
background: linear-gradient(to bottom, $v0, $v2);
&::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background: linear-gradient(to bottom, $v1, $v3);
-webkit-mask-image: linear-gradient(to left, white, transparent);
}
}
body {
background-color: #111111;
padding: 0;
margin: 0;
#quad {
$size: 100vh;
width: $size;
height: $size;
@include QuadVertexColors(red, magenta, yellow, white);
}
}
Ответ 3
ПРОСТО
Просто используйте этот стиль background для вашего элемента div:
.myDiv {
width: 256px; height: 256px;
background:
linear-gradient(to top left, white, rgba(255, 153, 150, 0), red),
linear-gradient(to top right, yellow,rgba(255, 153, 150, 0), magenta)
rgba(255, 153, 150, 1);
}
Где rgba(255, 153, 150, _ ) - это цвет в центре div и мы используем его снизу с a = 1 и в градиентах с a = 0 для совместимости с Safari (для других браузеров в градиентах мы можем изменить rgba(255, 153, 150, 0) до transparetn 50%).
Работающий, легко редактируемый пример здесь. Источник идеи здесь.
СРЕДНЯЯ
Нам нужно добавить и стилизовать div :after псевдоэлемент:
.myDiv {
width: 256px; height: 256px;
background: linear-gradient(to bottom, red, yellow);
}
.myDiv::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background: linear-gradient(to bottom, magenta, white);
-webkit-mask-image: linear-gradient(to left, white, transparent);
}
Работающий, легко редактируемый пример здесь. Идея от ответа TheDarkln (я сделал чистую версию CSS).
СЛОЖНЫЙ
.myDivC{
overflow: hidden;
background: linear-gradient(45deg, yellow, magenta);
width:256px; height:256px;
position:relative;
z-index:1;
}
.myDivC:before,.myDivC:after{
content:'';
position:absolute;
width:100%;
height:100%;
}
.myDivC:before{
background: red;
box-shadow: 0 0 140px 64px red;
z-index:2;
top: -96%;
left: -72%;
opacity: 0.8;
}
.myDivC:after {
background: white;
z-index: 3;
bottom: -96%;
right: -72%;
box-shadow: 0 0 100px 64px white;
opacity: 1;
border-radius: 100%;
}<div class="myDivC"></div>Ответ 4
ВЫСОКОЕ КАЧЕСТВО и ПОРТАТИВНО
В этом ответе я сравниваю три решения - но я нашел четвертое решение, которое производит изображение высокого качества и работает на Chrome, Safari, Firefox и Edge - вот оно:
.myDiv {
width: 256px; height: 256px;
background-size: 100% 100%;
background-image: url("data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='none' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'%3E%3C/stop%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='1'%3E%3C/stop%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect x='0' y='0' width='1' height='1' fill='url(%23g)'%3E%3C/rect%3E%3C/mask%3E%3ClinearGradient id='a' gradientTransform='rotate(90)'%3E%3Cstop offset='0' stop-color='magenta'%3E%3C/stop%3E%3Cstop offset='1' stop-color='white'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientTransform='rotate(90)'%3E%3Cstop offset='0' stop-color='yellow'%3E%3C/stop%3E%3Cstop offset='1' stop-color='red'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='1' height='1' fill='url(%23a)' mask='url(%23m)'%3E%3C/rect%3E%3Crect x='0' y='0' width='1' height='1' fill='url(%23b)' mask='url(%23m)' transform='translate(1,1) rotate(180)'%3E%3C/rect%3E%3C/svg%3E");
}
В этом решении мы внедряем SVG-изображение dataurl в стиль CSS. Мы можем свободно изменять width и height в myDiv (чтобы позволить это, мы используем в svg preserveAspectRatio='none', и дополнительно background-size: 100% 100%; для поддержки Firefox). Цвета, используемые внутри svg - magenta, white, yellow, red и их можно изменить на любой цвет в формате css. Чтобы обеспечить совместимость с MS Edge, в решении SVG мы меняем следующие символы: " на ', < на %3C, > на %3E и # на %23 (информация здесь).
