1、效果如下图
我在微信小程序中制作的
2、代码如下
<style>
.header {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.header .circle {
--circleValue: 500px;
position: absolute;
bottom: 0;
left: 50%;
width: 100%;
height: var(--circleValue);
transform: translateX(-50%);
background: radial-gradient(var(--circleValue) at top, transparent var(--circleValue), red var(--circleValue));
}
</style>
<div class="header">
<!-- 弧形 -->
<div class="circle"></div>
</div>3、原理
3.1 radial-gradient(500px at top, transparent 500px, red 500px);
意思：1、1000rpx at bottom 就是说，从top开始渐变，渐变圆的半径是500px
2、transparent 500px, red 500px 就是说，从top开始需要渐变时，开始的颜色是transparent ，500px以内都是transparent，然后【red 500px - transparent 500px】就是渐变中的颜色，但是他们的值都是500px，减去为0，无渐变效果，就会出现一条弧形
3.2 设置--circleValue的原因：控制弧形弯曲
1、要想弧形趋于直线，那么圆的半径要大，上面代码中渐变后的弧形在底部，所以用定位+bottom: 0; 这样就直接展示弧形出来了
2、设置--circleValue的原因是因为，这几个值要一样
2.1 渐变半径和盒子高度一样：是因为定位bottom设置为0，就可以直接看见了；
2.2 从3.1中得知，渐变颜色的范围值必须一样，便于出现弧形
3、注意：radial-gradient里面三个数值 <= 盒子高度，渐变半径要 > 渐变颜色范围值
3.1 radial-gradient里面三个数值 < 盒子高度，正常显示
3.2 radial-gradient里面三个数值 > 盒子高度，真正的渐变半径还是盒子的高度【你盒子高度还是这么高，渐变半径再大，就切不到底边了】
3.3 渐变半径要 < 渐变颜色范围值，你这个圆都渐变到底了，还没超过第一个渐变颜色范围，怎么看到渐变弧形呢？
