css 大佬帮看看 怎么实现

灰太狼爱兔子

比如用 menu来做 然后选中后的 menu-item 怎么用伪类实现右边的那个凹进去,并且里面有个白色的圆,找ai 只会给我干个三角形出来

jingyi11023995

用AI即可，关键是提问需要提供实现的思路：
我要实现一个CSS方案如下 ：一个圆角的长方形，背景是蓝色的，里面文字是白色。长方形右侧是一个旋转45度的圆角正方形，背景黑色，圆角正方形里面有一个白色的实心圆形。自己再改一下就行：
效果：

源码：
css设计.rar (615 Bytes, 下载次数: 1)

2025-4-2 13:51 上传

点击文件名下载附件

aipca

做个类似的PNG格式图片，选中的时候遮盖住

灰太狼爱兔子

aipca 发表于 2025-4-1 16:51
做个类似的PNG格式图片，选中的时候遮盖住

还是比较倾向于css完成呀

YourH

大概就是以下这样，实际自己调整看看

给圆点添加底部遮罩实现内凹，
.indicator{
background: #000000;
border-radius: 20px;
width: 70px;
height: 70px;
left: 89%;
transition: all .5s;
position: absolute;
border: 6px
solid #ecf4ff;
}
添加伪元素定位，遮盖实现右上圆弧效果
.indicator:before{
content:'';
position: absolute;
border-top-left-radius: 26px;
box-shadow:1px -10px0 0 #ecf4ff;
width: 20px;
height: 20px;
left: 89%;
}
添加伪元素定位，遮盖实现右下圆弧效果
.indicator:after{
content:'';
position: absolute;
border-bottom-left-radius: 30px;
box-shadow:-1px -10px0 0 #ecf4ff;
width: 20px;
height: 20px;
left: 89%;
}

1752328925

在菜单的div里面写一个div 宽度高度正方形，然后旋转45度，圆角 相对定位，定位到这个div的右边，在这个div里面再弄个圆角div 用来做小圈圈，白底就行了也需要定位到左边

haoren1212

白色圆的标签，加上想要实现的效果，列：侧边栏按钮被选择时【白色圆的标签，比如：<div class="container">】标签效果：圆型凹陷