1、效果图
2、HTML:
<div class="testA"></div>
3、CSS
.testA{width: 100px;height: 50px;background-color: #F0F2FA;margin-left: 50px;position: relative;border-top-left-radius: 10px;border-top-right-radius: 10px;&::before{content: '';// width: 0px;// height: 0px;position: absolute;left: -10px;bottom: 0;transform: rotate(-90deg);width: 10px;height: 10px;background-image: radial-gradient(circle at 12px -2px, #fff 12px, #F0F2FA 12px)}&::after{content: '';position: absolute;right: -10px;bottom: 0px;transform: rotate(0deg);width: 10px;height: 10px;background-image: radial-gradient(circle at 12px -2px, #fff 12px, #F0F2FA 12px)}}
如果觉得《使用css 画出弧形平滑过渡效果》对你有帮助,请点赞、收藏,并留下你的观点哦!