css3 - 如何用CSS制作平滑的半圆形tabbar？

Question

请问怎么把vantUI里的van-tabbar改造成这样凸起来比较平滑的半圆呀

用过伪元素，但是效果不太好

画出来的效果是这样，中间有一条细线，不知道你们能不能看出来，而且跟下面的tabbar的左右连接处不是很丝滑

用这两个div画出来了，有线是因为van-tabbar的z-index太高了。.centerIcon {  position: fixed;  width: 62px;  height: 31px;  background: #fff;  border-radius: 31px 31px 0 0;  left: calc(50% - 31px);  bottom: 48px;  z-index: 998;}.centerIcon-bg {  position: fixed;  width: 46px;  height: 46px;  background: linear-gradient(to bottom right, #5468fa 0%, #68bafd 100%);  border-radius: 23px;  left: calc(50% - 23px);  bottom: 25px;  z-index: 999;  display: flex;  align-items: center;  justify-content: center;}

Answer 1

你甚至可以直接画个圆,因为同一个色,然后使用定位,移动位置就行了

<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">  <block wx:for="{{tabbar.list}}" wx:key="item" wx:for-index="sindex">    <view bindtap="choseNav" class="tabbar_nav" data-sindex="{{sindex}}" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}">      <view class='special-wrapper {{item.selected?"pos-a":""}}'>        <image wx:if="{{item.selected}}" class="tabbar_icon" src="{{item.selectedIconPath}}"></image>        <image wx:else class="tabbar_icon" src="{{item.iconPath}}"></image>      </view>      <image class="circle" wx:if="{{item.selected}}" src="../../assets/icons/circle_shadow.png"></image>      <view class="placeholder" wx:if="{{item.selected}}"></view>      <view class="nav_txt {{item.selected?'checkColor':''}}">{{item.text}}</view>    </view>  </block></view>

css

.tabbar_box{    display: flex;    flex-direction: row;    justify-content: space-around;    position: fixed;    bottom: 0;    left: 0;    z-index: 999;    width: 100%;    box-shadow: 0px -5px 8px 0px rgba(26, 117, 87, 0.05);}.tabbar_box.iphoneX-height{  padding-bottom: 66rpx;}.tabbar_nav{  flex: 1;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  font-size: 20rpx;  height: 100%;  position: relative;  padding-top: 10rpx;  padding-bottom: 10rpx;}.special-wrapper{  width: 50rpx;  height: 50rpx;  font-size: 0;}.special-wrapper.pos-a{  position: absolute;  left: 0;  right: 0;  margin: auto;  top: -30rpx;  width: 92rpx;  height: 92rpx;  border-radius: 50%;  background-color: #fff;  text-align: center;  box-sizing: border-box;  display: flex;  align-items: center;  justify-content: center;  z-index: 10;}.circle{  position: absolute;  width: 130rpx;  height: 46rpx;  top: -46rpx;  left: 0;  right: 0;  margin: auto;  z-index: 9;}.special-wrapper .tabbar_icon{    width: 50rpx;    height: 50rpx;}.special-wrapper.pos-a .tabbar_icon{  width: 80rpx;  height: 80rpx;}.placeholder{  height: 50rpx;  height: 50rpx;}.nav_txt{  color: #9EA3B9;  font-size: 22rpx;}.checkColor{  color: #20CA8F;}

Answer 2

你就按几何形状做，没必要那么扣细节。
就是一个长方形叠加一个圆形 z轴长方形在下面，圆形在上面就行了。