html – 使用CSS在导航栏中显示边框三角形

概述我正在尝试创建一个带有箭头的导航栏,该项目位于项目上方.这是我想要做的： 对于箭头,我使用了之前和之后的伪元素.以下是一些代码： body { background: #FFFFFF; color: #FFFFFF; margin: 0px; padding: 0px; height: 100%;}.clear { clear: both;}.page-wrap { 我正在尝试创建一个带有箭头的导航栏,该项目位于项目上方.这是我想要做的：

对于箭头,我使用了之前和之后的伪元素.以下是一些代码：

body {  background: #FFFFFF;  color: #FFFFFF;  margin: 0px;  padding: 0px;  height: 100%;}.clear {  clear: both;}.page-wrap {  wIDth: 980px;  margin: 0px auto;  height: 100%;}#main-menu {  background: white;  height: 55px;  wIDth: 100%;  padding: 0px;  margin: 0px;  border-bottom: 1px solID black;}ul {  Font-family: Arial,Verdana;  Font-size: 18px;  margin: 0;  padding: 0;  List-style: none;}ul li {  display: block;  position: relative;  float: left;}li ul {  display: none;}ul li a {  display: block;  text-decoration: none;  color: black;  padding: 0 9px 0 9px;  background: white;  margin-left: 1px;  white-space: nowrap;  line-height: 55px;  Font: 18px;  Font-family: Arial,Helvetica,sans-serif;  outline: none;}ul li a:hover {  color: black;}#menu a:hover:after {  content: "";  position: absolute;  top: 40px;  left: 50%;  margin-left: -15px;  wIDth: 0px;  height 0px;  xxmargin: 0px auto;  border-left: 15px solID transparent;  border-right: 15px solID transparent;  border-bottom: 15px solID black;}

<header ID="main-menu">  <div >    <ul ID="menu">      <li><a href="#">Recommended</a></li>      <li><a href="#">Recent</a></li>    </ul>  </div></header>

Fiddle Link

由于边框颜色,箭头为黑色.如何只显示箭头的边框？

解决方法 只需在你添加的伪元素之前添加：after

#menu a:hover:after {  content: "";  position: absolute;  top: 41px;  left: 50%;  margin-left: -15px;  wIDth: 0px;  height 0px;  margin: 0px auto;  border-left: 15px solID transparent;  border-right: 15px solID transparent;  border-bottom: 15px solID white;}#menu a:hover:before {  content: "";  position: absolute;  top: 40px;  left: 50%;  margin-left: -15px;  wIDth: 0px;  height 0px;  margin: 0px auto;  border-left: 15px solID transparent;  border-right: 15px solID transparent;  border-bottom: 15px solID black;}

我已经更新了你的笔请检查

http://codepen.io/anon/pen/vOxmGZ

总结

以上是内存溢出为你收集整理的html – 使用CSS在导航栏中显示边框三角形全部内容，希望文章能够帮你解决html – 使用CSS在导航栏中显示边框三角形所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。