箭头之间的面包屑空间

Question

我想像下面的图像一样在每个箭头之间创建空间，但是它不起作用。我尝试添加padding和margin，但仍然无法正常工作。我想在每个箭头之间都像下面这样的图像之间创建空间，但是它不起作用。我尝试添加padding和margin，但仍然无法正常工作。

我提供此代码作为您的参考

HTML

<div class="container my-2">
    <div class="row">
    <div class="col-md-12 col-lg-12 mx-auto justify-content-center align-middle">
<ul id="breadcrumb">
  <li><a href="#"> Option 1</a></li>
  <li><a href="#">Option 2 </a></li>
  <li><a href="#">Option 3 </a></li>
  <li><a href="#"> Option 4</a></li>
  <li><a href="#">Option 5 </a></li>
  <li><a href="#"> Option 6</a></li>
</ul>

    </div>

</div>
</div>

CSS

#breadcrumb li:last-child a:after {
    border: none;
  }
  #breadcrumb li a:before, #breadcrumb li a:after {
    content: "";
    position: absolute;
    top: 0;
    border: 0 solid #3498db;
    border-width: 20px 10px;
    width: 0;
    height: 0;
  }
  #breadcrumb li a:before {
    left: -20px;
    border-left-color: transparent;
  }
  #breadcrumb li a:after {
    left: 100%;
    border-color: transparent;
    border-left-color: #3498db;
  }
  #breadcrumb li a:hover {
    background-color: #fc1052;
  }
  #breadcrumb li a:hover:before {
    border-color: #fc1052;
    border-left-color: transparent;
  }
  #breadcrumb li a:hover:after {
    border-left-color: #fc1052;
  }
  #breadcrumb li a:active {
    background-color: #fc1052;
  }
  #breadcrumb li a:active:before {
    border-color: #fc1052;
    border-left-color: transparent;
  }
  #breadcrumb li a:active:after {
    border-left-color: #fc1052;
  }

希望大家能帮助我

提前感谢

Answer 1

这里是如何获得所需输出的示例

body {
  background: #fff;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container div {
  width: 100px;
  height: 35px;
  background: lightblue;
  margin: 10px;
  position: relative;
  margin-right: 20px;
  
}

.container div::before,
.container div::after {
  content: '';
  position: absolute;
  background: #fff;
  left: -1px;
  width: 40px;
  height: 100%;
  z-index: 2;
  clip-path: polygon(0 2%, 0 100%, 57% 52%);
}

.container div::after {
  left: 99.8%;
  background: lightblue;
}

<div class="container">
    <div></div>
    <div></div>
    <div></div>
</div>

Answer 2

这里是一个非常基本的解决方案，可以轻松对其进行修改。基本上，您必须使用:before和:after创建箭头效果

HTML

 <ul class="breadcrumb">
      <li><a class="arrow" href="#"> Option 1</a></li>
      <li><a class="arrow" href="#">Option 2 </a></li>
      <li><a class="arrow" href="#">Option 3 </a></li>
      <li><a class="arrow" href="#"> Option 4</a></li>
      <li><a class="arrow" href="#">Option 5 </a></li>
      <li><a class="arrow" href="#"> Option 6</a></li>
    </ul>

CSS

.breadcrumb {
  display:flex;
}

.breadcrumb > li {
  margin-right: 28px;
}

.breadcrumb > li:last-of-type {
  margin-right: 0;
}

.arrow {
  background: #09f;
  color: #fff;
  padding: 10px 10px 10px 28px;
  text-decoration: none;
  position: relative;
  height: 40px;
}

.arrow:before {
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
height: 0;
border-style: solid;
border-width: 19px 0 19px 20px;
border-color: transparent transparent transparent #fff;
}

.arrow:after {
  content:'';
  position: absolute;
  top: 0;
  right: -20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 19px 0 19px 20px;
  border-color: transparent transparent transparent #09f;
}


ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}


body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

*,:before,:after {
  box-sizing: border-box;
}

这里是working sample