Reputation: 11
As seen in the below image,
I have a bottom div where the top left and top right start curving in. The bottom div has a fixed height of 100px and a width of 100%.
BOTTOM DIV
width: 100%;
height: 100px;
background: white;
border-top-left-radius: ???px;
border-top-right-radius: ???px;
I also have a top div that is green that is supposed to to connect to the top left/right curve of the bottom div.
TOP DIV
width: ???;
height: 15px;
border-bottom-left-radius: ???px;
border-bottom-right-radius: ???px;
How do I make two divs curve into one another? The top div is not the same width as the bottom div (it's a few pixels shorter on each side) and I don't know how to make them dynamically link up.
Upvotes: 1
Views: 106
Reputation: 15540
You can use a container with overflow: hidden
, and also set border-radius
on that container.
.container {
width: 200px;
height: 115px; /* Top + bottom divs' heights */
border-radius: 10px;
overflow: hidden; /* You should add this */
}
.top {
width: 100%;
height: 15px;
background-color: blue;
}
.bottom {
width: 100%;
height: 100%;
background-color: red;
}
<div class="container">
<div class="top">
</div>
<div class="bottom">
</div>
</div>
Upvotes: 3