HTML

<nav class="nav">
    <ul>
        <li><a href="#">1. Account Info</a></li>
        <li><a href="#">2. Verification</a></li>
        <li><a href="#">3. Enjoy</a></li>
    </ul>
</nav>

样式表

.nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    width: 100%;
}
.nav ul li {
    float: left;
    margin: 0 .2em 0 1em;
}
.nav ul a {
    background: red;
    padding: .3em 1em;
    float: left;
    text-decoration: none;
    color: #fff;
    position: relative;
}
.nav ul li:first-child a:before {
    content: normal;
}
.nav ul li:last-child a:after {
    content: normal;
}
.nav ul a:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -1.5em;
    border-width: 1.5em 0 1.5em 1em;
    border-style: solid;
    border-color: red rgba(0, 0, 0, 0);
    left: -1em;
    margin-left: 1px;
}
.nav ul a:after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -1.5em;
    border-top: 1.5em solid rgba(0, 0, 0, 0);
    border-bottom: 1.5em solid rgba(0, 0, 0, 0);
    border-left: 1em solid red;
    right: -1em;
    margin-right: 1px;
}

以下是 Demo

Answer 2

尝试：

HTML：

<div class="arrow">
    <p>1. Acount Info</p>
</div>

<div class="arrow2">
    <p>2. Verification</p>
</div>

<div class="arrow3">
    <p>3. Enjoy</p>
</div>

CSS：

.arrow {
    width: 200px;
    height: 33px;
    background-color: red;
    border: 1px solid red;
    position: relative;
    display:inline-block;
}
.arrow:after {
    content:'';
    position: absolute;
    top: 0px;
    left: 201px;
    width: 0;
    height: 0;
    border: 17px solid transparent;
    border-left: 12px solid red;
}

.arrow2 {
    width: 200px;
    height: 33px;
    background-color: red;
    border: 1px solid red;
    position: relative;
    display: inline-block;
margin-left: 8px;
}
.arrow2:after {
    content:'';
    position: absolute;
    top: 0px;
    left: 201px;
    width: 0;
    height: 0;
    border: 17px solid transparent;
    border-left: 12px solid red;
}


.arrow2:before {
    content:'';
    position: absolute;
    top: 0px;
    left: -1px;
    width: 0;
    height: 0;
    border: 17px solid transparent;
    border-left: 12px solid white;
}

.arrow3 {
    width: 200px;
    height: 33px;
    background-color: red;
    border: 1px solid red;
    position: relative;
    display: inline-block;
margin-left: 8px;
}
.arrow3:before {
    content:'';
    position: absolute;
    top: 0px;
    left: -1px;
    width: 0;
    height: 0;
    border: 17px solid transparent;
    border-left: 12px solid white;
}

p {
    color:white;
    text-align: center;
    margin-top: 6px;
}

DEMO

Answer 3

这是我的尝试：http://codepen.io/anon/pen/xDeCd/

即使用户更改了字体大小或触发了页面缩放，此示例也能正常运行。如果调整浏览器大小，列表项不应该在几行中断。

<强>截图

enter image description here

<强>标记

<ol>
  <li>1. Account info</li>
  <li>2. Verification</li>
  <li>3. Enjoy</li>
</ol>

（如果/在必要时添加链接，我只是认为它们不是链接，而只是关于流程中所需步骤的信息标签）。

相关CSS

ol {
  white-space: nowrap;
}

li:after, li:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  position: absolute;
  top: 0;
  width: 1em;
  height: 100%; 
}

li {
  display: inline-block;
  position: relative;
  height: 3em;
  padding: 0 1em;
  margin-right: 3em;
  background: #d12420;
  color: #f0f0f0;
  font: 1em/3em Arial;
}

li + li { margin-left: -1.8em; }


li:not(:last-child):after {
  left: 100%;  
  content: "";

  border-left: 1em  solid #d12420;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent; 
}

li + li:before {
  content: "";
  right: 100%;

  border-left: 1em  solid #transparent;
  border-top: 1.5em solid #d12420;
  border-bottom: 1.5em solid #d12420;  
}


li:nth-child(1) { z-index: 3; }
li:nth-child(2) { z-index: 2; }
li:nth-child(3) { z-index: 1; }

Answer 4

以下是一些代码，可能对您有用DEMO

<div class="breadcrumb flat"> <a class="active" href="#">1.Account Verification</a> <a href="#">2.Verification</a> <a href="#">3.Enjoy</a> </div>

在css中创建三角形

4 个答案:

HTML

样式表