来喽来喽 , 斜线表格

带斜线的表格, 这个 经常使用但是每次还得找 所以记录下来,下次有需求直接 copy~~

上结构 

 ======================================  HTML 结构   ===========================

<div class="tabwidth">         <table>           <tr class="theader">             <td class="w100" style="border-top-left-radius: 12px;">               <span class="s1">等级</span>               <p></p>               <span class="s2">分配</span>             </td>             <td>在线一级</td>             <td style="border-top-right-radius: 12px;">在线二级</td>           </tr>           <tr>             <td>应发</td>             <td>{{1}}</td>             <td>{{2}}</td>           </tr>            <tr>             <td>已发</td>             <td>{{3}}</td>             <td>{{4}}</td>           </tr>            <tr>             <td>待发</td>             <td>{{5}}</td>             <td>{{6}}</td>           </tr>         </table>       </div> ============================================结构完成 ===============================================   上样式    ============================================  CSS  ================================================= <style lang="less" scoped>        //  样式是 用less 写的    .tabwidth {      width: 500px;         table {           border-collapse: collapse;           border: 1px solid rgb(241, 242, 244);           width: 92%;           margin: 20px 0 0 0;           border-radius: 10px;           border-style: hidden;           box-shadow: 0 0 0 1px #d8d8d8;           td {             width: 111px;             border: 1px solid rgb(241, 242, 244);             height: 43px;             text-align: center;             font-size: 12px;           }           .theader {             td {               background-color: rgb(229, 236, 246);             }             .w100 {               width: 100px;               position: relative;               border-top-left-radius: 12px;               .s1 {                 position: absolute;                 left: 10px;                 top: 14px;               }               .s2 {                 position: absolute;                 right: 10px;                 top: 3px;               }               p {                 width: 101px;                 height: 1px;                 background: rgb(255, 255, 255);                 transform: rotate(17deg);                 position: absolute;                 left: 1px;                 top: 17px;               }             }           }         }       } </style>
上一篇:4-11 盒子模型(CSS的重点)


下一篇:网页中小窗口的代码1.0此时学到这里。