Programmiererforum

Hier ist mein HTML-CSS-Code < /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>
Ich versuche, der Schaltfläche der Schaltfläche zur gleichen Farbe hinzuzufügen Außerhalb der Kurve links und rechts des Tastens, so dass der Knopf ein gekrümmtes Erscheinungsbild verleiht. Aber nicht herausfinden, wie es geht. Zeiger würden geschätzt.