如何使用CSS实现导航栏(navbar)的外层弧形圆角效果

实现方案 #

你要的外侧弧形效果可以通过给.current选中状态添加::before、::after两个伪元素实现，核心思路是用伪元素模拟选中项右上角、右下角的外凹圆弧，圆弧背景和侧边导航栏的背景色保持一致即可。

首先修正你原有CSS的语法问题（缺失单位），再添加弧形相关代码：

/* 修正原有CSS的单位缺失问题，同时添加侧边栏背景色 */
ul {
  position: relative;
  left: 0%;
  top: 15%;
  list-style-type: none;
  margin: 0;
  padding: 1px; /* 补全单位 */
  width: 200px; /* 补全单位 */
  background-color: #292d32; /* 侧边栏背景色，和你原有wrapper的子元素背景保持一致 */
}

li a {
  display: block;
  color: white;
  padding: 15px 45px;
  text-decoration: none;
  font-size: 30px;
  width: 182px;
  color: #64686d;
  position: relative; /* 给伪元素定位做基准 */
}

.current {
  color: white;
  background-color: #21252a; /* 和主内容区背景色保持一致 */
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  position: relative;
}

/* 右上角外凹圆弧 */
.current::before {
  content: "";
  position: absolute;
  top: -20px;
  right: 0;
  width: 20px;
  height: 20px;
  border-bottom-right-radius: 20px;
  background-color: #292d32; /* 和侧边栏背景色一致 */
}

/* 右下角外凹圆弧 */
.current::after {
  content: "";
  position: absolute;
  bottom: -20px;
  right: 0;
  width: 20px;
  height: 20px;
  border-top-right-radius: 20px;
  background-color: #292d32; /* 和侧边栏背景色一致 */
}

.wrapper>div {
  background: #292d32;
  padding: 1em;
}

.wrapper>div:nth-child(odd) {
  background: #292d32;
}

原有HTML代码无需修改，调整颜色值匹配你的实际设计即可，圆弧的尺寸可以通过修改伪元素的宽高、border-radius值调整弧度大小。

内容的提问来源于stack exchange，提问作者dopuu