Чтобы создать прямоугольник с закругленными углами внутрь, можно использовать свойство border-radius
в сочетании с отрицательными значениями для отступов. Вот пример CSS кода, который поможет достичь этого эффекта:
.rectangle { width: 200px; height: 100px; background-color: #f1f1f1; border-radius: 20px; overflow: hidden; } .rectangle-content { margin: -20px; padding: 20px; }
В данном примере, у нас есть <div>
элемент с классом .rectangle
, который представляет прямоугольник с закругленными углами. Задаем ширину и высоту элемента через свойства width
и height
. Фоновый цвет установлен на свойстве background-color
.
Затем мы используем свойство border-radius
со значением 20px
. Это значение указывает, насколько сильно должны быть закруглены углы нашего прямоугольника. Большее значение будет создавать более явные закругления.
Чтобы создать эффект закругленных углов внутрь, мы добавляем элемент .rectangle-content
внутри нашего .rectangle
. Задаем внутренние отступы с помощью свойства padding
и отрицательные внешние отступы через свойство margin
. Отрицательные внешние отступы позволяют "затянуть" контент внутрь элемента и скрыть лишние фрагменты, создавая эффект закругленных углов внутрь.