Можно ли сделать разделительную полосу из трех частей () с помощью CSS? ⇐ CSS

[Anonymous]

Я пытаюсь воспроизвести разделительную полосу меню Nintendo Wii с помощью CSS в React JS и Tailwind (синяя, извините за плохое разрешение):


Как видите, полоса идет прямо, затем вниз, затем прямо, затем вверх и снова прямо.
Я попробовал разделить полосу на три части. Сначала левая часть, затем средняя, ​​а затем правая часть, используя радиус границы и тень блока, но моя главная проблема в том, что радиус становится тоньше по краям, и при объединении его с другой панелью края не сливаются. вместе. Вот код левой и средней части (правую часть я не стал делать) и части часов и даты:
.mm-left-box {
width: calc(50% - 8rem);
height: 100px;
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
transform: translateX(-17rem);
position: absolute;
border-bottom-right-radius: 50%;
padding-bottom: 1rem;
padding-top: 1rem;
}

.mm-left-bar {
border-top: 4px solid #00c4ff;
border-radius: 50px;
box-shadow: 0 -2px #00c4ff;
}

.mm-bar {
border-top: none;
border-bottom: 6px solid #00c4ff;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}


{/* Left Line */}




{/* Current Date and Time and Middle Line*/}



{formattedTime}

{currentDate}







Подробнее здесь: https://stackoverflow.com/questions/790 ... r-with-css