CSS: Zusammengesetzte Form zwischen zwei Divs teilen

Question

Seit vielen Stunden versuche ich, die beste Lösung für die Erstellung eines abgerundeten horizontalen Trennzeichens zwischen zwei Abschnitten zu finden. Unten ist das Bild und JS Fiddle von dem, was ich versuche zu erstellen.

Die einzige akzeptable Lösung, die ich bisher gefunden habe, ist die Verwendung Bild mit clip-path CSS-Eigenschaft. Aber gibt es eine einfachere und elegantere Lösung?

Helfen Sie mir bitte

This is how divider should look like

JsFiddle :(: Here the Fiddle where you can experiment

.wrapper { 
 
    max-width: 800px; 
 
    height: 300px; 
 
    margin: 20px auto; 
 
    border: 2px solid #ccc; 
 
} 
 

 
.section-1, 
 
.section-2 { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 50%; 
 
} 
 

 
.section-1 { 
 
    background-color: #2f4476; 
 
    color: #fff; 
 
}

<div class="wrapper"> 
 
    <div class="section-1">Section 1 content</div> 
 
    <div class="section-2">Section 2 content</div> 
 
</div>

Answer 1

Ich denke, der beste Ansatz eine Form zu tun, wie, dass man ist Verwenden Sie SVG-Elemente, um das c zu zeichnen Urves. Hier ist ein Beispiel für eine CSS-basierte, aber es ist nicht so glatt, als ob es mit SVG gemacht wurde.

.wrapper { 
 
    max-width: 800px; 
 
    height: 300px; 
 
    margin: 20px auto; 
 
    border: 2px solid #ccc; 
 
    overflow:hidden; 
 
    
 
} 
 
.section-1, .section-2 { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 50%; 
 
    position:relative; 
 
} 
 

 
.section-1 { 
 
    background-color: #2f4476; 
 
    color: #fff; 
 
} 
 
.section-1:after{ 
 
    display:block; 
 
    content:''; 
 
    width:50%; 
 
    height:20px; 
 
    position:absolute; 
 
    right:-16px; 
 
    bottom:0; 
 
    background:#fff; 
 
    border-top-left-radius:100px; 
 
    transform:skew(-60deg); 
 
} 
 

 
.section-1:before{ 
 
    transform:skew(-60deg); 
 
    display:block; 
 
    content:''; 
 
    width:50%; 
 
    height:20px; 
 
    position:absolute; 
 
    left:-18px; 
 
    bottom:-20px; 
 
    background:#2f4476; 
 
    border-bottom-right-radius:100px; 
 
    z-index:2; 
 
}

<div class="wrapper"> 
 
    <div class="section-1">Section 1 content</div> 
 
    <div class="section-2">Section 2 content</div> 
 
</div>

Answer 2

Es ist möglich, Zeichnung SVG Kreise und Rechtecke aus dem CSS-Code.

.wrapper { 
 
    width: 388px; 
 
    height: 226px; 
 
    margin: 20px auto; 
 
    border: 5px solid #ccc; 
 
} 
 
.section-1, .section-2 { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 50%; 
 
} 
 

 
.section-1 { 
 
    background-color: #2f4476; 
 
    color: #fff; 
 
    background-image: url("data:image/svg+xml,\ 
 
    <svg xmlns='http://www.w3.org/2000/svg' \ 
 
     width='388' height='113'>\ 
 
     <circle cx='271' cy='205' r='120' fill='#ffffff' />\ 
 
     <rect x='260' y='85' width='128' height='28' \ 
 
     fill='#ffffff'/>\ 
 
    </svg>"); 
 
} 
 
.section-2 { 
 
    background-color: #ffffff; 
 
    color: #000; 
 
    background-image: url("data:image/svg+xml,\ 
 
    <svg xmlns='http://www.w3.org/2000/svg' \ 
 
     width='388' height='113'>\ 
 
     <circle cx='117' cy='-92' r='120' fill='#2f4476' />\ 
 
     <rect x='0' y='0' width='128' height='28' \ 
 
     fill='#2f4476'/>\ 
 
    </svg>"); 
 
}

<div class="wrapper"> 
 
    <div class="section-1">Section 1 content</div> 
 
    <div class="section-2">Section 2 content</div> 
 
</div>