javascript - CSS 下 Angular 半径效果

Question

我之前的问题已经结束，但我确定我被误解了。我会再次复制那个问题，所以请不要关闭它，就我有一个具体问题而言。

我打算像这样构建一个标签式菜单:

所以我想知道您是否可以建议是否有一种方法可以使用纯 CSS 或任何其他方式来构建它，这样代码和 css 是干净的。并且可能连续有 10 - 15 个标签页。

也可能有下拉。

因此 html 部分可能如下所示:

<ul>
   <li><a href="">Some Text</a></li>
   <li><a href="">Some Text</a></li>
   <li><a href="">Some Text</a>
       <ul>
         <li><a href="">Some Text</a></li>
         <li><a href="">Some Text</a></li>
         <li><a href="">Some Text</a></li>
       </ul>
   </li>
</ul>

谢谢!!

编辑

我在构建选项卡时没有问题，我知道如何在菜单项上制作顶部半径，并使用 CSS 进行渐变，但不知道如何在所选菜单项上实现底部“圆 Angular 半径”效果。

是否可以仅使用 CSS 构建这样的菜单？还是我必须使用图像？

网上所有的samples和example都是在底部做圆 Angular 的，但是底部没有这样的效果。

Answer 1

Mikey，这在 CSS 中是一件非常困难的事情，因为没有办法进行排除。

一种解决方案是使用具有透明背景和足够粗的边框作为底部外部 flex 部分的前后伪元素。这是一个简单的双色示例: http://codepen.io/anon/pen/udfJc

这里的关键部分是让边框颜色为红色。如果需要，您可以隐藏此元素的溢出以收紧底线。鉴于您的设计，这项技术应该只需进行最少的调整即可工作。