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.
Hinzufügen einer Kurve auf der Schaltfläche links und rechts mit CSS ohne CSS -Maske [Duplikat] ⇐ CSS
-
- Similar Topics
- Replies
- Views
- Last post