Question

我目前有this fiddle，我想知道是否可以将底部边框完全舍入。

这是不起作用的特定CSS：

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

我希望底部边框是完全圆角的矩形，如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;
}

更新了代码

您可以将此转换为如下所示的ul菜单，而不是为每个项目添加ID，然后您可以通过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;
}

Answer 2

这样的东西？

#first{width:300px;background-color:green;}
#second{width:80px;background-color:red;height:10px;border-radius:5px;position:relative;top:-15px;left:3px;}
#third{width:80px;background-color:red;height:10px;border-radius:5px;position:relative;top:-25px;left:99px;}
#forth{width:80px;background-color:red;height:10px;border-radius:5px;position:relative;top:-35px;left:200px;}

<div id="first">&nbsp; </div><div id="second">&nbsp; </div><div id="third">&nbsp;</div><div id="forth">&nbsp;</div>

完全圆润的单边框

2 个答案:

更新了代码