Подскажите пожалуйста как так обрезать блок в рамках с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 получится красивее