-6
A
ответ
1
.div {
position: relative;
overflow: hidden;
padding: 50px 0;
}
.div-inner {
position: relative;
background: black;
height: 120px;
}
.div-inner:before,
.div-inner:after {
box-shadow: 0 0 0 80px #000;
border-radius: 100%;
position: absolute;
height: 150px; /* You can change it */
content: '';
right: -20%;
left: -20%;
top: 100%;
}
<div class="div">
<div class="div-inner"></div>
</div>
+0
Спасибо вам !!!! –
1
Есть много способов сделать это, он простой способ. У вас есть опыт работы с HTML/CSS, или вы новичок в этом?
body {
margin: 0;
background: #8e8e8e;
}
.header {
height: 50px;
width: 100%;
line-height: 50px;
text-align: center;
color: #fff;
}
.content {
background: #fff;
height: calc(100vh - 110px);
border-top-right-radius: 50% 60px;
border-top-left-radius: 50% 60px;
padding: 60px 20px 0 20px;
}
<div class="header">Header</div>
<div class="content">Content</div>
Можете ли вы показать нам, что вы пробовали до сих пор так мы можем помочь вам с этим кодом? – Roberrrt
Создайте круг, затем наложите свой заголовок. – Salasar
искать здесь, этот вопрос возникает один раз в неделю и был дан ответ много раз ... –