css实现圆角切直线(制作渐变标题)-(复制粘贴拿去用)

效果:

上代码：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);

                }

        }

   }

}

还是一句话----复制粘贴拿去用