请检查此图像链接：http : //postimg.org/image/4iooctxxt/
如您所见，我指出了3个导航痕迹。
我如何使用CSS / CSS3和HTML来获得此信息。如何才能做到这一点？如果可能的话，如何使用背景图像来完成。
尝试以下HTML和CSS：
<html>
<head>
<style>
body
{
margin: auto;
}
#one, #two, #three
{
position: relative;
width: 200px;
height: 40px;
float: left;
background-color: #E6E6E6;
cursor: pointer;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
#one
{
border-left: 1px solid gray;
}
#one:after, #two:after, #three:after
{
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #E6E6E6;
left: 100%;
top: 0px;
content: "";
z-index: 1;
}
#one:hover, #two:hover, #three:hover
{
background-color: #4DB84D;
}
#one:hover:after, #two:hover:after, #three:hover:after
{
border-left: 10px solid #4DB84D;
}
#circle, #text
{
float: left;
}
#circle
{
position: relative;
background-color: white;
color: black;
border-radius: 50%;
width: 21px;
height: 21px;
left: 15px;
top: 50%;
margin-top: -12px;
text-align: center;
border: 1px solid gray;
}
#text
{
position: relative;
left: 20px;
top: 50%;
color: black;
margin-top: -11px;
}
#one:hover #circle, #two:hover #circle, #three:hover #circle
{
background-color: #009900;
color: white;
}
#one:hover #text, #two:hover #text, #three:hover #text
{
color: black;
}
#navigation
{
padding: 40px;
position: absolute;
text-align: center;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 10px black;
margin-left: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="navigation">
<div id="one">
<div id="circle">
<b>1</b>
</div>
<div id="text">
Connect with Facebook
</div>
</div>
<div id="two">
<div id="circle">
<b>2</b>
</div>
<div id="text">
Invite friends
</div>
</div>
<div id="three">
<div id="circle">
<b>3</b>
</div>
<div id="text">
Complete Profile
</div>
</div>
</div>
</body>
</html>
您可以复制并粘贴它，以查看在新的html文档中会发生什么。当然，您可以根据需要对其进行修改。
编辑：这是一个完整的模板。要查看，请创建一个新的html文档，复制并粘贴代码，然后将其打开。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句