html - 完全圆润的单边框

Question

我目前有 this fiddle我想知道是否可以使底部边框完全变圆。

这是无法工作的特定 CSS 片段:

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

我希望底部边框是完全圆 Angular 的矩形，如 this

有什么方法可以使用 CSS 和 HTML 做到这一点吗？？

Answer 1

给你:)

DEMO

nav a:after {
    content: "";
    height: 6px;
    background: red;
    position: absolute;
    z-index: 1;
    top:20px; right:0; left:0; bottom:0;
    border-radius: 45px;
}

更新代码

无需为每个元素添加 ID，您可以将其转换为如下所示的 ul 菜单，然后您可以通过 CSS 中的 nth-child 属性对其进行定位。

DEMO

HTML

<div>
<ul class="nav">
  <li><a href="">Home</a></li>
  <li><a href="">Services</a></li>
  <li><a href="">Work</a></li>
  <li><a href="">Contact</a></li>
</ul>
</div>

CSS

.nav li:nth-child(1) a:after {
    background: blue;
}

.nav li:nth-child(2) a:after {
    background: yellow;
}

.nav li:nth-child(3) a:after {
    background: red;
}

.nav li:nth-child(4) a:after {
    background: pink;
}