Hinzufügen einer Kurve auf der Schaltfläche links und rechts mit CSS ohne CSS -Maske [Duplikat]CSS

CSS verstehen
Anonymous
 Hinzufügen einer Kurve auf der Schaltfläche links und rechts mit CSS ohne CSS -Maske [Duplikat]

Post by Anonymous »

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.

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post