Решение: (TL;DR)
Если вам нужны адаптивные градиенты, всегда лучше использовать синтаксис to [side] [side] вместо углов. Ниже приведен фрагмент, который создаст отзывчивый треугольник.
body {
background-color: red;
}
#grad1 {
height: 100px;
width: 100%;
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 49.9%, rgba(255, 255, 255, 1) 50.1%);
}
<div id="grad1"></div>
Объяснение:
Причину, по которой рассматриваемый градиент становится треугольником при меньшей ширине и становится своего рода трапецией при большей ширине, можно понять, если мы подробно рассмотрим, как угол градиента влияет на начальную и конечную точки градиента.
Почему угловой линейный градиент создает разные формы при разной ширине?
Линейные градиенты всегда определяются осью (которая называется линия градиента). Это можно представить как линию, проведенную через центр блока, содержащего градиент (черная линия на снимке экрана ниже), и повернутую на угол градиента. Линия 0 градусов начинается снизу и идет вверх, тогда как линия 90 градусов идет вправо.
В дополнение к линии градиента, градиенты также имеют воображаемую начальную точку и конечную точку. Начальная линия градиента – это перпендикулярная линия, проходящая от верхнего левого угла (угол, который находится в том же квадранте, что и начальная точка линии градиента) поля до линии градиента и конца линия – это перпендикулярная линия из правого нижнего угла (противоположного угла) поля к линии градиента.
Каждая точка на этой воображаемой линии градиента будет иметь определенный цвет в зависимости от определения градиента. В приведенном ниже случае я использовал градиент, прозрачный на 50% и белый на остальных. Таким образом, все точки в верхней половине линии градиента будут прозрачными, а точки в нижней половине будут белого цвета.
Как вы можете видеть на снимке экрана ниже, расстояние между начальной и конечной точками становится все больше и больше по мере увеличения ширины поля, и это также влияет на среднюю точку (средняя зеленая линия). Таким образом, точка, из которой градиент становится белым, изменяется по мере увеличения ширины, и, следовательно, форма также меняется.
Почему линейный градиент из стороны в сторону сохраняет форму при любой ширине?
Когда используется синтаксис из стороны в сторону, линия градиента наклонена таким образом, чтобы она указывала в (или к) тому же квадранту, в котором находится указанный угол (в этом случае она указывает на 2-й квадрант потому что там находится нижний правый угол коробки). Он также расположен под таким углом, что он перпендикулярен линии, соединяющей два соседних угла коробки (в данном случае это будут нижний левый угол и верхний правый угол). Поскольку угол линии градиента автоматически настраивается таким образом, чтобы он был перпендикулярен диагонали (линии, соединяющей два соседних угла), он всегда создает треугольник для градиента «половина».
Нижеприведенный фрагмент не является решением (то есть сверху). Это то, что я использовал для создания скриншота выше и решил оставить его здесь для развлечения :D
Для углового градиента:
div {
position: relative;
display: inline-block;
height: 100px;
background: linear-gradient(521deg, transparent 50%, white 50%);
margin: 200px 50px;
border: 1px solid black;
}
#div-large {
width: 400px;
}
#div-small {
width: 200px;
}
div:after {
position: absolute;
content: '';
width: calc(100% + 24px);
left: -12px;
background: linear-gradient(to right, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to right, green 6px, transparent 6px);
background-position: 0px 0px, 0px, calc(50% - 1px);
background-repeat: no-repeat, repeat-x;
background-size: 100% 100%, 12px 2px;
border-top: 2px dashed green;
border-bottom: 2px dashed green;
transform: rotate(521deg);
}
#div-large:after{
height: calc(100% + 125px);
top: -64px;
}
#div-small:after{
height: calc(100% + 60px);
top: -32px;
}
body {
background: sandybrown;
}
<div id='div-small'></div>
<div id='div-large'></div>
Для градиента из стороны в сторону:
div {
position: relative;
display: inline-block;
height: 100px;
margin: 200px 50px;
border: 1px solid black;
}
#div-large {
width: 400px;
background: linear-gradient(526deg, transparent 50%, white 50%);
}
#div-small {
width: 200px;
background: linear-gradient(513.5deg, transparent 50%, white 50%);
}
div:after {
position: absolute;
content: '';
width: calc(100% + 24px);
left: -12px;
background: linear-gradient(to right, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to right, green 6px, transparent 6px);
background-position: 0px 0px, 0px, calc(50% - 1px);
background-repeat: no-repeat, repeat-x;
background-size: 100% 100%, 12px 2px;
border-top: 2px dashed green;
border-bottom: 2px dashed green;
}
#div-large:after{
height: calc(100% + 93px);
top: -48px;
transform: rotate(526deg);
}
#div-small:after{
height: calc(100% + 78px);
top: -41px;
transform: rotate(513.5deg);
}
body {
background: sandybrown;
}
<div id='div-small'></div>
<div id='div-large'></div>
Отказ от ответственности: мое объяснение сильно зависит от этого страница MDN, но я постарался изложить как можно больше своими словами :)
person
Harry
schedule
12.05.2016
