我們有時會遇到要用實現一個弧形,而這樣的弧形要怎么實現呢?
用圖片?好像不大現實,因為這樣就要無故多加載一張圖片了
,這里我們來說說怎么用css的after偽類來實現弧形。
如果想要調整弧度的話,可以通過高讀來調整的;
<view class="bb"></view>
.bb{
width: 100%;
height: 140px;
position: relative;
z-index: -1;
overflow: hidden;
}
.bb::after {
content: '';
width: 120%;
height: 100px;
position: absolute;
left: -10%;
top: 0;
z-index: -1;
border-radius: 0 0 60% 60%;
background: #1496f1;
}

<view class="aa"></view>
.aa{
width:100%;
height: 330rpx;
position: relative;
z-index: -1;
overflow: hidden;
}
.aa::after{
content:'';
width: 100%;
height: 330rpx;
position: absolute;
left: 0;
top:0;
z-index: -1;
border-radius: 0 0 50% 50%;
background: #1496F1;
}
