В этом методе используются 2 компонента:
a) Определив размер фона 20 пикселей на 20 пикселей (последняя строка), вы определяете квадрат этих размеров. Это будет действовать как рамка, которая будет вырезать ..
б) линейный градиент под заданным углом, переходящий от цвета к прозрачному.
В большинстве случаев это создает треугольник. (вы можете создать трапецию, если выйдете за угол в измерении градиента) ![gradient](https://i.stack.imgur.com/GnnLM.png)
Обратите внимание, что вы можете получить любой угол основного квадрата, регулируя угол градиента.
Фон, который у вас есть, состоит в основном из 6 треугольников.
Что остается для создания интересного макета, так это возможность расположить разные треугольники, которые у вас есть. Это 2 параметра после цветов градиента, позиция задается координатами x и y.
Я использовал этот метод в некоторых ответах: здесь или, что довольно сложно, здесь
Играйте и экспериментируйте - вот способ учиться.
Я изменил ваш пример на это
div {
background:
linear-gradient(27deg, red 17px, transparent 17px) 0 20px,
linear-gradient(207deg, green 20px, transparent 20px) 40px 0px,
linear-gradient(90deg, pink 40px, transparent 40px),
linear-gradient(white 25%, orange 25%, orange 50%, transparent 50%, transparent 75%, black 75%, black);
background-size: 80px 80px;
}
![background2](https://i.stack.imgur.com/2Amb5.png)
Синий прямоугольник - это базовый размер фона.
Первая строка создает красный треугольник с углом 27 градусов (который указывает приблизительно на 2 часа, имеет красный цвет 17 пикселей, а затем мгновенно меняется на прозрачный. Здесь находится плавкая часть. Положение 0 o будет иметь этот треугольник в качестве первого изображения, которое я опубликовал. Установив положение на 0px 20px, мы установили его вниз. Поскольку это повторяющийся градиент, теперь он отображается высоко в синем квадрате (эквивалент, более легкий для понимания, будет position = 0px - 60 пикселей. Вы устанавливаете его на расстоянии 20 пикселей от верхнего края, поэтому касаясь границы
Вторая линия стиля образует зеленый треугольник. Угол равен 207, поэтому идет в направлении, противоположном красному. размер 20 пикселей, примерно такой же, как у красного, но он расположен на 40 пикселей по оси y. Если бы он не был размещен, он бы располагался в правом верхнем углу квадрата (только первое изображение, которое я опубликовал, повернуто на 180 градусов. Сдвиг его на 40 пикселей вправо, он выглядит так, как будто он вошел в соседний квадрат .
Возможно, лучший способ понять это - поиграть с каждым значением в инструментах разработчика браузера.
person
vals
schedule
04.02.2014