效果:
上代码:HTML
<span class="system_name">
<span class="systemnamespan1">
<span class="systemnamespan2">
<span class="systemnamespan3">一二三标题</span>
</span>
</span>
</span>
css 代码:
.system_name {
font-size: 14px;
font-family: PingFangSC-Semibold;
color: #fff !important;
font-weight: 600;
background: #fafbfd;
width: 100%;
height: 44px;
line-height: 44px;
border-radius: 7px 7px 0 0;
border-bottom: 1px solid #dee2e5;
.systemnamespan1{
background: #e2eefc;
padding:0 27px 0 0;
border-top-left-radius: 6px;
clip-path:polygon(86% 0 ,100% 100% , 0 100% , 0 0);
.systemnamespan2{
height: 44px;
display: inline-block;
background: #c7deec;
border-top-left-radius: 6px;
padding:0 27px 0 0;
clip-path:polygon(85% 0 ,100% 100% , 0 100% , 0 0);
.systemnamespan3{
height: 44px;
display: inline-block;
background: #3690e8;
padding:0 45px 0 24px;
border-top-left-radius: 6px;
clip-path:polygon(84% 0 ,100% 100% , 0 100% , 0 0);
}
}
}
}
还是一句话----复制粘贴拿去用