Как сделать углы блока в CSS округлыми?

Как можно вырезать правый нижний угол у блока с закругленными углами и вставить туда кнопку, используя CSS или SCSS?
  • 23 марта 2025 г. 11:24
Ответы на вопрос 1
Чтобы сделать углы блока округлыми, можно использовать свойство CSS `border-radius`. Например:

```css
.block {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border-radius: 15px; /* Закругление углов */
}
```

### Вырезание правого нижнего угла

Чтобы вырезать правый нижний угол и вставить туда кнопку, можно использовать свойства `clip-path` или `border-radius` в комбинации с псевдоэлементами. Вот один из способов сделать это с помощью псевдоэлементов:

```html
<div class="container">
    <div class="block">
        <button class="button">Кнопка</button>
    </div>
</div>
```

```css
.container {
    position: relative;
}

.block {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border-radius: 15px;
    position: relative;
    overflow: hidden; /* Обрезаем содержимое, выходящее за пределы блока */
}

.block::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px; /* Ширина вырезанного уголка */
    height: 50px; /* Высота вырезанного уголка */
    background: lightblue;
    border-top-left-radius: 15px; /* Закругление вырезанного уголка */
}

.button {
    position: absolute;
    bottom: 10px; /* Отступ от низа */
    right: 10px;  /* Отступ от правого края */
    background-color: white;
    border: 1px solid #007bff;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}
```

### Объяснение кода

- **`.block`**: основной блок с закругленными углами.
- **`.block::after`**: псевдоэлемент, который создает вырезанный угол, он расположен в правом нижнем углу блока.
- **`.button`**: кнопка, размещенная внутри блока, она расположена так, чтобы быть в пределах вырезанного угла.

С помощью этого подхода вы сможете создать блок с закругленными углами и вырезанным правым нижним углом для кнопки.
Похожие вопросы