我需要这样做.是否可以用纯CSS？
解决方法
使用border-radius,before和transform：skew(…);
body {
background-color: #000;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
}
.tab {
height: 50px;
width: 150px;
border-radius: 15px 15px 0px 0px;
background-color: #FFF;
position: relative;
top: 10px;
left: 1px;
display: inline-block;
z-index: 2;
}
.tab:before {
height: 50px;
width: 70px;
border-radius: 10px 10px 0px 0px;
background-color: white;
content: "";
position: absolute;
left: 104px;
top: 0px;
-webkit-transform: skewX(40deg);
transform: skewX(40deg);
z-index: -1;
}
.tab:nth-of-type(2) {
background-color: #555;
top: 10px;
left: 30px;
z-index: 1;
color: #EEE;
}
.tab:nth-of-type(2):before {
background-color: #555;
}
.tab:nth-of-type(2):hover,.tab:nth-of-type(2):hover:before {
background-color: #159;
transition: 0.3s ease-out;
}
span {
display: inline-block;
width: 160px;
text-align: center;
height: 50px;
line-height: 50px;
z-index: 3;
}
#page {
background-color: white;
height: calc(100vh - 120px);
width: calc(100vw - 61px);
position: relative;
top: 10px;
left: 1px;
padding: 30px;
}
<nav id="tabs">
<div class="tab">
<span>Tab 1</span>
</div>
<div class="tab">
<span>Tab 2</span>
</div>
</nav>
<div id="page">
Lorem Ipsum dolor sit amet ...
</div>
