html - 如何使用纯 CSS 实现事件侧边栏项的向外曲线

Question

过去一周我一直在学习前端设计，我试图复制我在 dribble 上看到的设计，但由于向外 flex ，我一直很难复制边栏上的事件样式。

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

除了事件侧边栏元素上的向外曲线，我已经能够实现其他东西。

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

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

Answer 1

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

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

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

我在这里对 :hover 状态产生了影响，但您可以将一个类添加到您的事件列表项并在那里施展魔法。

.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);
}

Hover over menu items to see the effect
<ul class="menu">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>