如何使用纯 CSS 实现活动侧边栏项目的向外曲线

Question

过去一周我一直在学习前端设计，我试图复制我在运球时看到的设计，但我一直很难复制侧边栏上的主动风格，这是向外曲线的原因。

如果有人能帮助我解决如何实现它，我会很高兴。

除了活动侧边栏项目上的向外曲线之外，我已经能够实现其他功能。

我无法发布图片，因为我的声誉不到 10，所以我添加了设计的链接

https://cdn.dribbble.com/users/1192538/screenshots/6973301/flight_web1.png

Answer 1

棘手的部分是右侧的“倒”角。这可以通过 :before 和 :after 元素中的径向渐变背景来解决。

径向渐变通常用于从一种颜色逐渐过渡到另一种颜色。但是，在这种情况下，我们可以以这样的方式操纵它，即在白色和蓝色之间有一条“清晰”的线。为此，您需要确保蓝色和白色的 px 值非常接近。

background: radial-gradient(circle at top left, blue 10px, white 11px);

我在这里对 :hover 状态产生了影响，但是您可以将一个类添加到您的活动列表项并在那里发挥作用。

background: radial-gradient(circle at top left, blue 10px, white 11px);

.menu{
  list-style-type: none;
  background: blue;
  width: 200px;
  border-radius: 20px;
  padding: 30px 0 30px 30px;
}

.menu li{
  position: relative;
  padding: 5px;
  border-radius: 10px 0 0 10px;
}

.menu li:hover{
  background: white; 
}

.menu li:hover:after,
.menu li:hover:before{
  content:'';
  position: absolute;
  width: 10px; 
  height: 10px;
  right: 0px;
}

.menu li:hover:after{
  top: -10px;
  background: radial-gradient(circle at top left, blue 10px, white 11px);
}

.menu li:hover:before{
  bottom: -10px;
  background: radial-gradient(circle at bottom left, blue 10px, white 11px);
}