BeHappy :
I want to have a tabs like image below, but I don't have any idea to make it.
Jack :
Make the tab into a png image. Here is one I did really quick. I have a border on the top and no border on the bottom so it will overlay the existing border making appear as it curves up
Then combine it with some styling to get your result
*:focus {
outline: none;
}
.content {
background-color: #F7F7F7;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.tabs {
margin-bottom: -1px;
background-color: white;
border: 1px solid #F4C949;
border-radius: 20px;
padding: 0px 20px;
padding-top: 32px;
}
.tab {
position: relative;
z-index: 2;
display: inline-block;
width: 175px;
height: 30px;
margin-bottom: -6px;
padding-top: 8px;
text-align: center;
}
.tab:focus {
background: url(https://i.stack.imgur.com/45ecy.png);
background-size: contain;
background-position: top;
background-repeat: no-repeat;
}
.tab-content {
height: 150px;
padding: 16px;
border: 1px solid #F4C949;
border-radius: 20px;
}<div class="content">
<div class="tabs">
<div class="tab tab-active" tabindex="0">
Tab 1
</div>
<div class="tab" tabindex="0">
Tab 2
</div>
</div>
<div class="tab-content">
Click tab to get the effect
</div>
</div>Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=404740&siteId=1