На картинке — не вырезка из учебника геометрии за 8 класс, а иллюстрация к описанию методики расчёта вырезания углов из ваших дивов и прочих секшенов.
И взято оно из очередной статьи Темани Афифа, посвящённой созданию различных фигур. У нас уже были звёзды, сердца, ленточки, треугольники.
И теперь пришёл черёд углов: https://verpex.com/blog/website-tips/how-to-create-shapes-with-inner-curves-using-css-mask
И реализовано всё на CSS Mask: https://developer.mozilla.org/en-US/docs/Web/CSS/mask
Описываете маску, накладываете на фигуру — красота.
.shape {
--r: 25px; /* the radius */
--s: 40px; /* the size of the cut */
--_m:/calc(2*var(--r)) calc(2*var(--r))
radial-gradient(#000 70%,#0000 72%) no-repeat;
mask:
right calc(var(--s) + var(--r)) top 0 var(--_m),
right calc(var(--s) + var(--r)) var(--_m),
radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%)
calc(-1*var(--r)) var(--r) no-repeat,
conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)), #0000 25%,#000 0);
}
Собственно, это весь код, дальше только параметры менять.
Как описать — прочитаете в статье. И да, геометрии 8-9 класса там достаточно :)
#css #figure #mask #clip