CSS+HTML<箭头导航栏效果>

效果图：

image.png

代码如下：

html:

 <div class="box">
      <span class="tab">1</span>
      <span class="tab">2</span>
      <span class="tab">3</span>
    </div>

css:

.tab {
  margin-left: -0.5rem;
  cursor: pointer;
  transition: 0.5s;
  display: inline-block;
  width: 150px;
  height: 40px;
  line-height: 40px;
  background: #ccc;
  color: white;
  font-weight: bold;
  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%);
}
.tab:hover {
  background: royalblue;
}
.tab:first-child {
  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%, 0% 50%);
}
.tab:last-child {
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 5% 50%);
}