Ankhena

Вам ставят задачу - вы её обдумываете, читаете литературу, что-то проверяете и тестируете, проектируете, а потом уже пишете код, а потом снова тестируете и девопсите. Попутно затрагиваются другие интересные темы, которые вы тоже изучаете. Кто-то считает это рабочим временем, кто-то свободным (кроме писания кода).

Стандартная практика для джуна: вот тебе пару задач, которые надо сделать вчера, очень важные. А джун просто не в состоянии сказать (правильно сформулировать и донести до начальника): "У меня через 2 часа заканчивается рабочий день, завтра выходные, поэтому решу задачу через неделю, комиссия с проверкой подождёт." Это происходит, потому что джуны обычно чувствуют себя неопытными, неполноценными, что они не знают внутреннего устройства и процессов компании, что они кому-то должны. Отсюда возникают переработки, выгорания и заучивание этой "схемы", которую после повышения с чувством мести они реализуют на новых джунах.

Как вариант:



Можно сделать через transform: rotate, но тогда придётся на глаз подбирать нужный угол. И если длина у перечёркнутых участков текста будет сильно различаться, будет криво.

Если у следующей секции фон сплошной цвет, то просто поверх картинки натягивается svg (через background-image либо абсолютно позиционированным элементом)

Если фон следующей секции картинка/градиент/паттерн, то придется использовать svg clipPath/mask (см. ответ Максим Ленский)

Сохраняй в svg

Не использовать text-align: justify в принципе. Но в данном случае можно не использовать с применением медиазапроса.

Если используешь svg clipPath из css, то удобней сделать path с относительными координатами (т.е. верхние левый угол картинки имеет координаты (0, 0), нижний правый (1, 1)), а самому clipPath задать атрибут clipPathUnits="objectBoundingBox"

Или может есть какой-то другой способ добавления маски

css.yoksel.ru/svg-masks

1. Установить гит
1.1. Возможно перед этим установить консоль\надстройку, которая способна с ним работать (зависит от ОС).
2. Скачать репки и работать дальше.

Обычный каскад:

.variants__text.active > .check {
    /* стили перезаписывающие стандартные */
}

css пофиг wordpress у вас или нет. Прочтите вот это. Если вопрос останется, то возвращайтесь.

#UPD: Вот так можно:

<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

.red {
    color: red;
}

const hours = new Date().getHours();

if (hours >= 9 && hours <= 15) {
    document.querySelector('#test li:nth-child(3n)').classList.add('red')
}

var chars = "123";
пароль может быть составлен только из цифр 1, 2 и 3

var passwordLength = 4;
длина пассворда должна быть 4 символа

var randomNumber = Math.floor(Math.random() * chars.length);

выбирается один случайный символ из трех доступных (из chars)

password += chars.substring(randomNumber, randomNumber + 1);

из строки chars вытаскивается этот случайно выбранный символ таким образом: берется строка chars, а затем из нее вырезаются символы от randomNumber до randomNumber + 1 - в итоге только один символ. randomNumber - это позиция случайно выбранного символа в строке chars

P.S. чёт всё как-то криво и не исправляется

С линейным не знаю, но можно сделать с радиальным. Накидал тут 3 варианта, с возрастающей степенью упоротости, в зависимости от того насколько принципиально чтобы были квадраты:
https://codepen.io/Arseny_dp/pen/OJMmVvv

А так, с фоновой картинкой довольно чистый вариант. Почему не хотите его использовать?

Используй расчеты на JS.

как договоритесь, так и будет.
четкого и однозначного деления нет.

Формула периметра квадрата не зависит от языка программирования.
Периметр_квадрата = длина_стороны * 4

Переписать в json и вывести всё это в цикле в javascript - и будет на выходе один блок в котором гора карточек

примерно вот так




это я единственное что на js умею