Полина Емельянова

Как вариант, если без магии с СВГ и прочими:
У блока с цифрой сделать выноску на ПСЕВДОЭЛЕМЕНТЕ и разместить ее ПОВЕРХ бордера.

&:before {
   content: "";
   position: absolute;
   top: 100%;
   left: сколько надо;
   height: 10px или сколько надо;
   width: 20px или сколько надо;
   background-color: #fff; // и это самое узкое место, т.к. измениться фон - будет видена эта выноска
   z-index: 2;
  }

Уберите высоту с html, body,
Проставьте min-height: 100%;

Немного наркомании к бдсм.))))

Вместо флекса попробовать флоаткуть картинку)

Боюсь на флексах такое сделать не удастся. Тут надо 3 дать флоат или абсолют: любым способом выбить из потока, и там зафиксировать.
Ну или на грядах, как в примере выше. Это самый лучший выход.
Только умоляю: не городи дубляжа блоков.

https://www.sarasoueidan.com/blog/ - Разработчик. Спец по доступности, родом из ОАЭ, а значит понимает, о чем говорит. Таки rtl, как ни как.)
https://bitsofco.de/ - пишет не часто. Но весьма меткие и актуальные вещи. Хайпа у нее нет, но очень грамотно.
https://rachelandrew.co.uk/ - крестная мать Грид.
https://uptodate.frontendrescue.org/ - клондайк.)
lea.verou.me - в представлении не нуждается. Маст рид.

На пару недель-месяцев вам хватит.))))

Ну, например Так - https://codepen.io/emelyanova/pen/ZXzYgr
Или так - https://codepen.io/emelyanova/pen/PJwJOw

Попробуйте тут
https://github.com/Innvenio/Diagonal-Slider
По ходу, то что вы хотели.)

Так...
1. Карусель с цветами - это "тупой" коленовский Slick slider. Погуглите.
2. "Слайдер" секции выше - обманка. Это просто жестко спозиционированный блок, в который на событие "клик по слайду с цветом" выводится соответствующая картинка. Каждая картинка идеально центрирована и одного размера, отсюда иллюзия, что меняется только чехол, а не вся картинка.
3. С ДжЫэсом на ВЫ... Тогда готовьтесь к БОЛИ.
Делаем форму с радиоботоннами и лаблами, которые загоняем в слик слайдер.
Делаем див, куда зашиваем ВСЕ картинки и позиционируем их абсолютом с прозрачностью.
Дальше на клик-эктив меняем прозрачность у нужной картинки в блоке.

Я бы сделала так.
Прошу коллег поправить, если есть что сказать по существу.

Такой подход даст вам только функцию смены цвета, но не позволит реализовать изменение формы.
Т.к. на это потребуется море подобного кода.

Про такие игры с косыми блоками я могу рассказать очень хорошо. Только покажите мне где тут будет текстовый контент. Мои соображения и личное ИМХО:

1. Если это тупо бекграунд секции - на кой заморачиваться? Можно и градиентом отделаться...

2. Все эти skewY(Ndeg) - требуют потом отработки по scale(N), т.к. скривленная секция и выправленный бекграунд плохо уживаются. Как и на оборот.

3. Вы можете отыграть вариант с псевдоэлементами: это мой экспримент, а это живая болванка

4. Все клиппасы - это круто! Но они не позволяют безболезненно подогнать блоки в стык, т.к. обрезают "вьюпорт", но ничего не делют с боксом, т.е. он как был квадратный, так и останется. Не будет подгонки к скошенному ребру, скошенного же соседа, учтите это. Потом они обладают свойством оверфло, т.е "режут" вместе с контентом, а значит его придется отодвигать от срезаемого края паддингом-маргином.

Благодарю, коллеги!!!
ХРОМ!!! Прошу, расскажите, что за политика.

Пока Viewport-единицы рулят миром.

https://s.codepen.io/emelyanova/debug/zWaxLM/VJrxx...

Завтра отдебажу и дам ответ.)

https://codepen.io/emelyanova/pen/NYYZpP

ФлексБокс из Велсом.)))