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

[Anonymous]

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

Игнорируйте, как отрезан текст, который просто решается с прозрачным фоном на контейнере, но его покрытие черного цвета. выделены с разными цветами и не совпадают по вертикали ». src = "https://i.sstatic.net/o0cenya4.png"/>
< /p>
фрагмент тоже в действии: < /p>


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