Подскажите пожалуйста как так обрезать блок в рамках сss

Можно ли сделать такое оформление блоков только сss свойствами, без использования svg? чтобы иметь хорошую адаптивность и масштабируемость


Ответы (1 шт):

Автор решения: darinka poznyak

.container {
  width: 500px;
  height: 500px;
  position: relative;
  margin: auto;
}

.border_rect {
  width: 500px;
  height: 350px;
  background: lightgray;
  border-radius: 0 80px 80px 80px;
  position: absolute;
  bottom: 0;
}

.border_rect_top {
  width: 200px;
  height: 150px;
  background: lightgray;
  border-radius: 75px 50px 0 0;
  position: absolute;
  top: 0;
  left: 0;
}

.round_rect {
  width: 300px;
  height: 100px;
  border-radius: 40px;
  background: white;
  position: absolute;
  right: 20px;
  top: 55px;
}

.rect {
  width: 250px;
  height: 80px;
  position: absolute;
  background: coral;
  border-radius: 40px;
  top: 10px;
  left: 25px;
}

h1 {
  text-align: center;
  color: white;
}

p {
  font-family: Times New Roman;
  font-size: 45px;
}
<div class="container">
  <div class="border_rect">
    <p>Подготовка не нужна - процедуру можно выполнить в день записи</p>
  </div>
  <div class="border_rect_top"></div>
  <div class="round_rect">
    <div class="rect">
      <h1>RF-лифтинг</h1>
    </div>
  </div>
</div>

Если планируете всё же использовать больше как декоративный элемент, то можно воспользоваться вот таким вариантом-конструктором. Не точь в точь, но всё же. Это если именно на css хотите, без svg. Хотя, с svg получится красивее

→ Ссылка