Question

＆＃13;

* {
    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;
}

＆＃13;

<!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>

＆＃13;

我想将第二个div（#middle）连接到底部div（#bottom），但是在中间div的两侧还有一个小空间，使它看起来没有吸引力。有帮助吗？任何设计建议都会很好：P

Answer 1

检查一下。

* {
    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>

Answer 2

您可以尝试以下解决方案：

* {
  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>

如何将曲线div连接到另一个？

2 个答案: