CODEWITHSUNDEEP
htmlcss
Senpai Saitama
Senpai Saitama

Reputation: 313

How do I connect a curved div to another?

* {
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100%;
    background-color: #DDDDDD;
}
h1 {
    color: #00BBFF;
    font-family: "Lato", "Helvetica", "Futura", sans-serif;
    text-align: center;
    font-size: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}
#container {
    width: 550px;
    height: 550px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}
#cakeContainer {
    width: 400px;
    height: 400px;
    border-radius: 100% / 50%;
    background-color: white;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
#top {
    background-color: white;
    border-bottom: 1px black solid;
    width: 400px;
    height: 70px;
    border-radius: 100%;
    padding-top: 100px;
}
#bottom {
    background-color: white;
    border-bottom: 1px black solid;
    width: 400px;
    height: 120px;
    padding-top: 50px;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    border-right: 1px solid black;
    border-left: 1px solid black;
}
#middle {
    background-color: white;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    border-bottom: 20px #FFFFCC solid;
    width: 400px;
    height: 100px;
    padding-bottom: 50px;
    border-right: 1px solid black;
    border-left: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Happy Birthday!</title>
    <link rel="stylesheet" type="text/css" href="css.css" />
    <link rel="shortcut icon" type="image/png" href="http://www.giftatonce.com/store/android/uploaded_files/1458668593_GCN07.png"/>
</head>
<body>
<h1>Happy Birthday Mom!</h1>
<div id="container">
    <div id="cakeContainer">

        <div id="top">

        </div>
        <div id="middle">

        </div>
        <div id="bottom">

        </div>
    </div>
</div>
</body>
</html>

I want to connect the 2nd div (#middle) to the bottom div (#bottom) , but there's still a small space on the sides of the middle div, making it look unappealing. Any help? And any design advice would be nice :P

Upvotes: 1

Views: 48

Answers (2)

Sebastian Brosch
Sebastian Brosch

Reputation: 43604

You can try the following solution:

* {
  margin: 0;
  padding: 0;
}
body {
  width: 100%;
  height: 100%;
  background-color: #DDDDDD;
}
h1 {
  color: #00BBFF;
  font-family: "Lato", "Helvetica", "Futura", sans-serif;
  text-align: center;
  font-size: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#container {
  width: 550px;
  height: 550px;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
#cakeContainer {
  width: 400px;
  height: 400px;
  border-radius: 100% / 50%;
  background-color: white;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border:1px solid black;
}
#top {
  background-color: white;
  border: 1px black solid;
  width: 400px;
  height: 70px;
  border-radius: 100%;
  padding-top: 100px;
  margin-left:-1px;
}
#bottom {
  background-color: white;
  border-bottom: 1px black solid;
  width: 400px;
  height: 120px;
  padding-top: 50px;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  border-right: 1px solid black;
  border-left: 1px solid black;
  margin-left: -1px;
}
#middle {
  background-color: white;
  width: 400px;
  height: 100px;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  border-bottom: 20px #FFFFCC solid;
}
<h1>Happy Birthday Mom!</h1>
<div id="container">
  <div id="cakeContainer">
      <div id="top"></div>
      <div id="middle"></div>
      <div id="bottom"></div>
  </div>
</div>

Upvotes: 1

Rahul
Rahul

Reputation: 2071

Check it.

* {
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100%;
    background-color: #DDDDDD;
}
h1 {
    color: #00BBFF;
    font-family: "Lato", "Helvetica", "Futura", sans-serif;
    text-align: center;
    font-size: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}
#container {
    width: 550px;
    height: 550px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}
#cakeContainer {
    width: 400px;
    height: 400px;
    border-radius: 100% / 50%;
    background-color: white;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
#top {
    background-color: white;
    border-bottom: 1px black solid;
    width: 400px;
    height: 70px;
    border-radius: 100%;
    padding-top: 100px;
}
#bottom {
    background-color: white;
    border-bottom: 1px black solid;
    width: 400px;
    height: 120px;
    padding-top: 50px;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    border-right: 1px solid black;
    border-left: 1px solid black;
    top: -79px;
    position: relative;
    z-index: 0;
}
#middle {
    background-color: white;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    border-bottom: 20px #FFFFCC solid;
    width: 400px;
    height: 100px;
    padding-bottom: 50px;
    border-right: 1px solid black;
    border-left: 1px solid black;
    position: relative;
    z-index: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Happy Birthday!</title>
    <link rel="stylesheet" type="text/css" href="css.css" />
    <link rel="shortcut icon" type="image/png" href="http://www.giftatonce.com/store/android/uploaded_files/1458668593_GCN07.png"/>
</head>
<body>
<h1>Happy Birthday Mom!</h1>
<div id="container">
    <div id="cakeContainer">

        <div id="top">

        </div>
        <div id="middle">

        </div>
        <div id="bottom">

        </div>
    </div>
</div>
</body>
</html>

Upvotes: 2

Related Questions