I need to create a div with the same radius base as the attached image.
But I can not find the exact value in border-radius to leave the image equal, is there any other way to do this? Remembering I need to leave responsive.
I'mdoingafiddletestwithborder-radiusbutit'shardtoleavethesame. link
Note: The arrow is not part of the doubt.
I think you can increase the width of the div , so that the border radius becomes smoother, but for the layout to not ruin, use overflow: hidden on the parent div.
.container {
width: 100%;
background-color: #e4f0f6;
padding: 0;
margin: 0;
height: 100vh;
overflow: hidden;
}
.test {
width: 110%;
margin: 0 -5%;
text-align: center;
background-color: #fff;
padding: 40px 0;
border-radius: 0 0 500% 500%;
}
.arrow {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid white;
margin: auto;
}<div class="container">
<div class="test">
<h1>Teste com borda!</h1>
</div>
<div class="arrow"></div>
</div>Is this what you need?
Another way to do this is to use radial-gradient() property. background . See:
.container{
width:100%;
background-color:#e4f0f6;
padding:0;
margin:0;
height:100vh;
}
.test{
width:100%;
text-align:center;
padding:40px 0;
border-radius: 0px 0px 50% 50% / 0 0 25% 25%;
background: radial-gradient(ellipse at center,#fff 15%,#fff 0%,#fff 57%,rgba(0,0,0,0) 50%);
}<div class="container">
<div class="test">
<h1>Teste com borda!</h1>
</div>
</div>