css 做图形 tabbar选项卡

## 主要是靠堆标签慢慢调css 

### 直接上代码

- 这个是效果图

 

 + 代码也给上

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6   <title>Document</title>
  7   <style>
  8     *{
  9       padding: 0;
 10       left: 0;
 11     }
 12     .box{
 13       width: 400px;
 14       margin: 0 auto;
 15       height: 600px;
 16       border-radius: 50px;
 17       background: #dfebff;
 18       display: flex;
 19     }
 20     .left,.right{
 21       width: 50%;
 22       background: #dfebff;
 23       height: 60px;
 24       border-radius: 50px 40px 0 0;
 25       position: relative;
 26    
 27     }
 28     p{
 29       position: absolute;
 30       z-index: 5;
 31       top: 50%;
 32       left: 50%;
 33       transform: translate(-50%,-100%);
 34       color: #3487ff;
 35     }
 36     .right{
 37       /* z-index: 3;
 38       background-color: #eee; */
 39       border-radius: 0 40px 0 0;
 40 
 41     }
 42     .left{
 43       background: #dfebff;
 44     }
 45     .left::after{
 46       content: "";
 47       z-index: 1;
 48     position: absolute;
 49     bottom: 0px;
 50     right: -198px;
 51     width: 100%;
 52     height: 100%;
 53     border-radius: 0 40px 0 30px;
 54     transform: rotate(180deg);
 55     background-color: #d1dff7;
 56     }
 57    .left::before{
 58     content: "";
 59       z-index: 1;
 60     position: absolute;
 61     bottom: 0px;
 62     right: -197px;
 63     width: 100%;
 64     height: 100%;
 65     border-radius: 50px 40px 0 0;
 66     background-color: #dfebff;
 67    }
 68 
 69    .right::after{
 70       content: "";
 71       z-index: 1;
 72     position: absolute;
 73     bottom: 0px;
 74     right: 200px;
 75     width: 100%;
 76     height: 100%;
 77     border-radius:  0 0px  30px 40px;
 78     transform: rotate(180deg);
 79     background-color: #dfebff;
 80     }
 81    .right::before{
 82     content: "";
 83       z-index: 1;
 84     position: absolute;
 85     bottom: 0px;
 86     right: 200px;
 87     width: 100%;
 88     height: 100%;
 89     border-radius: 50px 0px 0 40px;
 90     background-color:#d1dff7;
 91    }
 92   </style>
 93 </head>
 94 <body>
 95     <div class="box">
 96         <div class="left">
 97           <p>测评展示</p>
 98         </div>
 99         <div class="right">
100           <p style="color: #98c1ff;">专业推荐</p>
101         </div>
102     </div>
103 </body>
104 </html>

 

posted @ 2020-04-28 11:13  我爱小番茄  阅读(1074)  评论(0)  编辑  收藏  举报
2 3
4