设计稿.sketch
    https://js.design/f/Ey0X10?p=Cxl-JQsi_R&mode=programmer

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6.   <style>
    7.     .contaner {
    8.       width: 960px;
    9.       min-height: 800px;
    10.       display: flex;
    11.       flex-direction: column;
    12.     }
    13.     .tabCon {
    14.       max-height: 50px;
    15.       min-height: 50px;
    16.       display: flex;
    17.     }
    18.     .tabItem {
    19.       width: 256px;
    20.       border-top-left-radius: 24px;
    21.       border-top-right-radius: 24px;
    22.       background-color: #22222e;
    23.       display: flex;
    24.       justify-content: center;
    25.       align-items: center;
    26.       position: relative;
    27.       border-bottom: 2px solid #b04dff;
    28.     }
    29.     .tabItem::after {
    30.       content: "";
    31.       position: absolute;
    32.       right: -15px;
    33.       bottom: 0px;
    34.       width: 21px;
    35.       height: 40px;
    36.       background: linear-gradient(
    37.         to left bottom,
    38.         transparent 0%,
    39.         transparent 49.9%,
    40.         rgba(148, 88, 255, 1) 50.9%,
    41.         rgba(185, 88, 255, 1) 55.9%,
    42.         rgba(34, 34, 46, 1) 55.9%,
    43.         rgba(34, 34, 46, 1) 100%
    44.       );
    45.       pointer-events: none;
    46.       z-index: 999;
    47.     }
    48.     .tabCon .active {
    49.       border-top: 2px solid #b04dff;
    50.       border-left: 2px solid #b04dff;
    51.       border-right: 2px solid #b04dff;
    52.       border-bottom: 2px solid transparent;
    53.       z-index: 9999;
    54.     }
    55.     .tabCon .active::after {
    56.       content: "";
    57.       position: absolute;
    58.       right: -18px;
    59.       bottom: -2px;
    60.       width: 20px;
    61.       height: 40px;
    62.       background: linear-gradient(
    63.         to left bottom,
    64.         transparent 0%,
    65.         transparent 49.9%,
    66.         rgba(148, 88, 255, 1) 50.9%,
    67.         rgba(185, 88, 255, 1) 55.9%,
    68.         rgba(34, 34, 46, 1) 55.9%,
    69.         rgba(34, 34, 46, 1) 100%
    70.       );
    71.       pointer-events: none;
    72.       z-index: 999;
    73.     }
    74.     .tabCon .active::before {
    75.       content: "";
    76.       position: absolute;
    77.       bottom: -2px;
    78.       height: 2px;
    79.       width: 100%;
    80.       background-color: #22222e;
    81.       z-index: 999;
    82.     }
    83.     .tabBody {
    84.       border-top-right-radius: 24px;
    85.       flex-grow: 1;
    86.       background: linear-gradient(rgba(148, 88, 255, 1) 0%, #22222e 20%);
    87.       padding: 0 2px;
    88.       box-shadow: 0 -2px 0px 0px #b04dff;
    89.       display: flex;
    90.     }
    91.     .bodyCon {
    92.       border-top-right-radius: 24px;
    93.       flex-grow: 1;
    94.       width: 100%;
    95.       background-color: #22222e;
    96.       padding: 0 24px;
    97.     }
    99.     progress {
    100.       width: 669px;
    101.       height: 10px;
    102.       background-color: transparent;
    103.     }
    105.     /* 表示总长度背景色 */
    106.     progress::-webkit-progress-bar {
    107.       border-radius: 5px;
    108.       background-color: transparent;
    109.     }
    111.     /* 表示已完成进度背景色 */
    112.     progress::-webkit-progress-value {
    113.       border-radius: 5px;
    114.       background-image: linear-gradient(45deg, #385df2 0%, #c815ff 100%);
    115.     }
    116.   </style>
    117. </head>
    118. <body>
    119. <div class="contaner">
    120.   <div class="tabCon">
    121.     <div class="tabItem active">选项卡1</div>
    122.     <div class="tabItem   ">选项卡2</div>
    123.   </div>
    124.   <div class="tabBody">
    125.     <div class="bodyCon">
    126.       <br />
    127.       <br />
    128.       <br />
    129.       <progress max="100" value="30"></progress>
    130.       <br />
    131.       <br />
    132.       <br />
    133.       <progress max="100" value="100"></progress>
    134.       <br />
    135.       <br />
    136.       <br />
    137.       <progress max="100" value="60"></progress>
    138.     </div>
    139.   </div>
    140. </div>
    141. </body>
    142. </html>