css用伪类做某元素上下相邻两个元素圆角

最新推荐文章于 2024-05-01 12:01:29 发布

czxlll

最新推荐文章于 2024-05-01 12:01:29 发布

阅读量389

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/czx1314ails/article/details/127920861

版权

样式参考

在这里插入图片描述

左上角和左下角的圆角

css代码

.active-item::after{
  content: '';
  position: absolute;
  bottom: -20rpx;
  right: 0;
  width: 20rpx;
  height: 20rpx;
  background-color: #fff;
  z-index: 99;
  line-height: 10px;
  display: block;
  text-align: center;
  background-image: radial-gradient(140rpx at 0px 20rpx,#F5F6F7 20rpx,#fff 20rpx) ;
  transform: rotate(360deg);
}
.active-item text::after{
  content: '';
  position: absolute;
  top: 50%;
  transform: translate(0%,-50%);
  left: 0;
  width: 5rpx;
  height: 50rpx;
  background: #2C9CB8;
  border-radius: 0px 8px 8px 0px;
}