CODEWITHSUNDEEP
htmlcss
codeman951
codeman951

Reputation: 11

How do I make two divs curve into each other?

As seen in the below image,

attached 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

Answers (1)

Nick Vu
Nick Vu

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

Related Questions