如何实现图片中所示的内凹圆角样式?-灵析社区

看数据的中二丸子头

简单写了一个，思路就是这样的 👇 "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241002/5099ced11878e1d5178315dbbd3666cb.png) 右上角其实可以用渐变背景色实现会更加优雅一些，但有一个按钮在附近就省了这部分的，代码也更好理解一些。 "🌰 CodePen Demo" (https://codepen.io/yogwang/pen/oNOyjEo) .demo width 300px padding-right 80px margin 20px position relative &-container height 140px background #f6f6f6 border-radius 45px 45px 0 0 position relative &:before, &:after width 80px height 80px content '' display block position absolute right 0 transform translateX(100%) &:after width 30px height 30px background #f6f6f6 bottom 60px &:before height 60px background #f6f6f6 border-top-right-radius 45px bottom 0 &-arrow-btn width 70px height 70px background #f6f6f6 border 10px solid white border-radius 50% position absolute right -9px top -9px