Как лучше нарисовать скошенный блок с закруглёнными углами?

Для реализации скошенного блока с закругленными углами в CSS есть несколько подходов. Я расскажу о двух основных: использование CSS свойства transform и использование псевдоэлементов ::before и ::after.

1. Использование CSS свойства transform:

Для начала создадим прямоугольный блок с закругленными углами обычными средствами CSS, используя свойства width, height и border-radius. Затем применим к этому блоку свойство transform: skewX(angle) для наклона его горизонтальных сторон.

Пример кода:

   <style>
   .skewed-box {
     width: 200px;
     height: 100px;
     border-radius: 10px;
     background-color: #f5f5f5;
     transform: skewX(-20deg);
   }
   </style>
   
   <div class="skewed-box"></div>

В этом примере блок будет иметь ширину 200 пикселей, высоту 100 пикселей и будет наклонен на 20 градусов влево. Если нужно, блок может быть адаптирован под конкретные требования, изменяя значения свойств.

2. Использование псевдоэлементов ::before и ::after:

Этот способ позволяет создать скошенный блок с закругленными углами, в котором углы имеют одинаковую округленность. Для этого создаются два псевдоэлемента — ::before и ::after — которые имеют форму треугольников и находятся бок о бок в центре блока.

Пример кода:

   <style>
   .skewed-box {
     position: relative;
     width: 200px;
     height: 100px;
     background-color: #f5f5f5;
     overflow: hidden;
   }
   .skewed-box::before,
   .skewed-box::after {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: -1;
     background-color: #f5f5f5;
   }
   .skewed-box::before {
     top: 0;
     left: -50%;
     transform: skewX(-20deg);
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
   }
   .skewed-box::after {
     top: 0;
     left: 50%;
     transform: skewX(20deg);
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
   }
   </style>
   
   <div class="skewed-box"></div>

В этом примере блок будет иметь ширину 200 пикселей, высоту 100 пикселей и оба горизонтальных края будут скошены на 20 градусов с закругленными углами радиусом 10 пикселей.

Оба описанных подхода можно дальше настраивать и адаптировать под конкретные потребности проекта, добавлять отступы, разные цвета и т. д.