Добавление кривой на кнопке влево и вправо с помощью CSS без использования маски CSS [Duplicate] ⇐ Html

[Anonymous]

Вот мой код HTML CSS, < /p>


.container {
display: flex;
flex-direction: row;
justify-content: center;
}
.tab {
width: 1000px;
height: 200px;
background: #fff;
display: flex;
margin-left: 50px;
align-items: center;
}
.buttons{
margin-left:100px;
display: flex;
}
.button{
width: 160px;
height: 80px;
background: #3c65b5;
border-top-left-radius: 36px;
border-top-right-radius: 36px;
text-align: center;
line-height: 80px;
}

.left-curve{
width: 1%;
height: 80px;
background: #3c65b5;
line-height: 80px;
position: relative;
}

.left-curve::before{
position: absolute;
content: "";
width: 36px;
height: 36px;
background: transparent;
bottom:0;
left:-36px;
border-bottom-right-radius: 36px;
box-shadow: 1px 1px;
}

.right-curve{
width: 1%;
height: 80px;
background: #3c65b5;
line-height: 80px;
position: relative;
}

.right-curve::before{
position: absolute;
content: "";
width: 36px;
height: 36px;
background: transparent;
bottom:0;
left:1px;
border-bottom-left-radius: 36px;
box-shadow: -1px 1px;
}< /code>





Hello



< /code>
< /div>
< /div>
< /p>
Я пытаюсь добавить тот же цвет, что и к кнопку к За пределами кривой слева и правой стороны кнопки, чтобы кнопка давала изогнутый вид. Но не в состоянии понять, как это сделать. Любые указатели будут оценены.


Подробнее здесь: https://stackoverflow.com/questions/794 ... g-css-mask