CSS底部边界问题

Question

我希望有人可以给我一些关于摆脱下面nav的右下角三角形的建议。在每个之后保留底部边框和白色边框。谢谢！

CSS代码

#top-menu ul{
  width:100%;
  float:left;
  padding:0 0 10 0;
  color:#666666;
  margin-left:64.5%;
  margin-top:0px;
  list-style-type:none;
}

#top-menu ul a {
  float:left;
  text-decoration:none;
  color:#ffffff;
  background-color:#5aa1e3;
  padding:0.2em 0.9em;
  border-bottom: 3px solid #B2DEFC;
  border-right: 3px solid white;
}


#top-menu a:hover {
  background-color:#C957BB;   
}

这是我的Fiddle

Answer 1

删除border-right: 3px solid white;中的#top-menu ul a并改为使用保证金。

JsFiddle

CSS

#top-menu ul a {
  float:left;
  text-decoration:none;
  color:#ffffff;
  background-color:#5aa1e3;
  padding:0.2em 0.9em;
  border-bottom: 3px solid #B2DEFC;
  margin: 10px;
}

Answer 2

由于border-right with color，右下角呈三角形。现在删除border:right项目之间不会有空格。因此，您可以使用display:inline-block;在项目之间给出一些距离。此外，您多次使用float:left，在这种情况下实际上并不需要。

检查 DEMO 。

#top-menu ul{
  width:100%;
  color:#666666;
  list-style-type:none;
}

#top-menu li{ display:inline-block;}

#top-menu ul li a {

  text-decoration:none;
  color:#ffffff;
  background-color:#5aa1e3;
  padding: 1em;
  border-bottom: 5px solid #B2DEFC;
}


#top-menu a:hover {
  background-color:#C957BB;   
}

Answer 3

检查这是否对您有所帮助。 DEMO

将边框设为li

#top-menu ul li {
      border-bottom: 3px solid #B2DEFC;
    margin-right: 3px;
    float:left;
  }

Answer 4

这似乎无关紧要，但请耐心等待......

https://meta.stackexchange.com/a/210715/217863

这就是边界大规模渲染的方式。

当然，如果您只是在寻找解决方法......

您可以使用伪元素覆盖底部边框和不需要的角落，如下所示：
Working Example

div:after {
    content:"";
    display:inline-block;
    position: relative;
    top: 100px;
    background: none repeat scroll 0% 0% #808080;
    height: 20px;
    width: 140px;
    left: -20px;
}