Линия с кривыми на каждой стороне создает фоновые проблемы? ⇐ Javascript

[Anonymous]

Я пытаюсь создать линию, которая «течет» с левой стороны экрана на правую сторону с кривыми по бокам, опубликует изображения для разъяснения. Однако я не знаю ни нативного способа создать линию изгиба вверх/внутрь в нижней части Div. Это создает проблему, что мне все еще нужно все выше линии, чтобы быть черным, поэтому черный див влево, названное (.Start), необходимо, чтобы сделать фон черным, а затем Div под ним, чтобы покрыть черный и сделать кривую линии простым радиусом границы. Чтобы создать, с возможностью размещения изображений и тому подобного < /p>
текущая проблема, посмотрите, как кусок крышки немного втягивается в серой. Не обращайте внимания на то, как отрезан текст, который просто решается с прозрачным фоном на контейнере, но он покрывает черный на данный момент. < /P>
Различные цвета на всех Divs, чтобы увидеть, как это построено. class = "Snippet">

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body {
overflow-x: hidden;
}

.container {
width: 100%;
height: 200px;
display: flex;
background-color: white;
position: relative;
}

.start {
width: calc(100px - 2rem);
height: calc(200px - 2rem);
background-color: black;
}
.start-cover {
width: 120px;
height: 110px;
background-color: white;
position: absolute;
left: -2.9rem;
bottom: -1px;
border-left: 1.2rem solid #ffff00;
border-top: 1.2rem solid #ffff00;
border-radius: 100% 0 0;
}
.mid {
width: calc(100% - 200px + 4rem);
height: 110px;
background-color: black;
border-bottom: 1.2rem solid #ffff00;
}
.end {
width: 120px;
height: 110px;
position: absolute;
top: 0;
right: -2.8rem;
background-color: black;
border-bottom: 1.2rem solid #ffff00;
border-right: 1.2rem solid #ffff00;
border-radius: 0 0 100%;
}< /code>



< /code>
< /div>
< /div>
< /p>
Я попытался переключить DIV как с PNG, так и с SVG, но никто не работал так хорошо, как я хочу, чтобы они с ответственностью. И поэтому я застрял с этим решением.
Если у вас есть альтернативное решение, не стесняйтесь помочь мне, но также и просто простое исправление, о котором я не думал. < /P>

Подробнее здесь: https://stackoverflow.com/questions/797 ... d-problems