失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 使用css 画出弧形平滑过渡效果

使用css 画出弧形平滑过渡效果

时间:2022-05-26 07:11:04

相关推荐

使用css 画出弧形平滑过渡效果

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 画出弧形平滑过渡效果》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。