CSS实现菜单选项向外圆角效果

最终效果

实现方法

1. ::before、::after伪元素裁剪拼接

完整代码：

示例中图标引用了iconfont，地址点击这里

html代码

   <body>
    <ul>
      <li class="active"><i class="iconfont">&#xe61d;</i></li>
      <li><i class="iconfont">&#xe61e;</i></li>
      <li><i class="iconfont">&#xe61f;</i></li>
      <li><i class="iconfont">&#xe620;</i></li>
      <li><i class="iconfont">&#xe621;</i></li>
    </ul>
  </body>

css代码

 @import "./font/iconfont.css";
 
.iconfont {
  font-size: 40px;
  color: #ffffff;
}
 
ul {
  width: 150px;
  margin: 200px auto 0;
  padding: 40px 0 40px 10px;
  background-color: #40699e;
  border-right: 10px solid #00aaff;
  box-sizing: border-box;
}
 
 
li {
  position: relative;
  height: 80px;
  line-height: 80px;
  list-style: none;
  background-color: #40699e;
  border-radius: 20px 0 0 20px;
  cursor: pointer;
  transition-duration: 0.3s;
}
 
li::before,
li::after {
  position: absolute;
  right: 0;
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 100%;
  box-shadow: 0 0 0 20px transparent;
  transition-duration: 0.3s;
  z-index: 1;
}
 
li::before {
  top: -40px;
  clip-path: inset(50% 0 0 50%);
}
 
li::after {
  bottom: -40px;
  clip-path: inset(0 0 50% 50%);
}
 
 
li.active,
li:hover {
  background-color: #00aaff;
  transition-duration: 0.3s;
}
 
li.active::before,
li.active::after,
li:hover::before,
li:hover::after {
  box-shadow: 0 0 0 20px #00aaff;
}
 
li i {
  margin-left: 20px;
}

分析：

首先给伪元素设置足够宽的box-shadow或border，然后分别定位在右上角和右下角位置。

通过clip-path对其进行切割，分别得到右下和右上方向的一角。

通过对伪元素在不同状态下（static、hover、active）的阴影（或边框）颜色的修改来达到最终效果。

附录：

MDN clip-path

2. 方法二待补充

posted @ 2023-04-11 14:55 Li_pk 阅读(1654) 评论(0) 编辑收藏举报

	<body>
	<ul>
	<li class="active"><i class="iconfont"></i></li>
	<li><i class="iconfont"></i></li>
	<li><i class="iconfont"></i></li>
	<li><i class="iconfont"></i></li>
	<li><i class="iconfont"></i></li>
	</ul>
	</body>

笔记

CSS实现菜单选项向外圆角效果

最终效果

实现方法

1. ::before、::after伪元素裁剪拼接

完整代码：

分析：

附录：

2. 方法二待补充

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	@import "./font/iconfont.css";

	.iconfont {
	font-size: 40px;
	color: #ffffff;
	}

	ul {
	width: 150px;
	margin: 200px auto 0;
	padding: 40px 0 40px 10px;
	background-color: #40699e;
	border-right: 10px solid #00aaff;
	box-sizing: border-box;
	}


	li {
	position: relative;
	height: 80px;
	line-height: 80px;
	list-style: none;
	background-color: #40699e;
	border-radius: 20px 0 0 20px;
	cursor: pointer;
	transition-duration: 0.3s;
	}

	li::before,
	li::after {
	position: absolute;
	right: 0;
	content: '';
	width: 40px;
	height: 40px;
	border-radius: 100%;
	box-shadow: 0 0 0 20px transparent;
	transition-duration: 0.3s;
	z-index: 1;
	}

	li::before {
	top: -40px;
	clip-path: inset(50% 0 0 50%);
	}

	li::after {
	bottom: -40px;
	clip-path: inset(0 0 50% 50%);
	}


	li.active,
	li:hover {
	background-color: #00aaff;
	transition-duration: 0.3s;
	}

	li.active::before,
	li.active::after,
	li:hover::before,
	li:hover::after {
	box-shadow: 0 0 0 20px #00aaff;
	}

	li i {
	margin-left: 20px;
	}