Wie verbinde ich ein gekrümmtes Div mit einem anderen?

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

Ich mag die zweite div (#middle) an die Unterseite div (#bottom), aber es ist immer noch ein kleiner Raum an den Seiten des mittleren div verbinden, so dass es nicht ansprechend aussehen. Irgendeine Hilfe? Und jedes Design Beratung wäre schön: P

Quelle

2017-02-20 Senpai Saitama

Entfernen Sie einfach die Polsterung unten auf Mitte? [Überprüfen Sie es] (https://jsfiddle.net/vs1zf93x/) – skobaljic

es prüfen.

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

Quelle

2017-02-20 18:00:10 Rahul

Sie können versuchen, die folgende Lösung:

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

Quelle

2017-02-20 17:57:59

Wie verbinde ich ein gekrümmtes Div mit einem anderen?

Antwort

Verwandte Themen