JSFiddle - React, Tailwind, and code Playground

by Yann Brelière

HTML

<div class="FlexBlock_element--size-auto_tPe9A" data-reactid=".cm55msm3nk.3.0.0:$/=10">
  <ul class="Breadcrumbs_Breadcrumbs_zA8dw" data-reactid=".cm55msm3nk.3.0.0:$/=10.0">
    <li class="Breadcrumbs_BreadcrumbItem_1zGjM" data-reactid=".cm55msm3nk.3.0.0:$/=10.0.0">
      <a class="breadcrumbItem Breadcrumbs_BreadcrumbLink_15xyf" href="javascript:void(0)" data-reactid=".cm55msm3nk.3.0.0:$/=10.0.0.0">UI</a>
   </li>
    <li class="Breadcrumbs_BreadcrumbItem_1zGjM" data-reactid=".cm55msm3nk.3.0.0:$/=10.0.0">
      <a class="breadcrumbItem Breadcrumbs_BreadcrumbLink_15xyf" href="javascript:void(0)" data-reactid=".cm55msm3nk.3.0.0:$/=10.0.0.0">Long breadcrumb</a>
   </li>
    <li class="Breadcrumbs_BreadcrumbItem_1zGjM currentStep" data-reactid=".cm55msm3nk.3.0.0:$/=10.0.0">
      <span class="breadcrumbItem Breadcrumbs_BreadcrumbLink_15xyf" href="javascript:void(0)" data-reactid=".cm55msm3nk.3.0.0:$/=10.0.0.0">Current step</span>
   </li>
  </ul>
</div>

CSS

* {
  font-family: Arial;
}

div {
}
ul {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden; /* hide the top and bottom tips of the arrows */
  
  box-sizing: border-box;
  height: 50px;
  margin: 0;
  padding: 0;
  border: 0;
  
  background-color: #0b2a29;
  box-shadow: inset 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
}
  /* First arrow (Nav Home's arrow) */
  ul:before { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 60px solid transparent;       
    border-bottom: 60px solid transparent;
    border-left: 25px solid #0b2a29;
    position: absolute;
    top: 50%;
    margin-top: -60px;
    left: -15px;
    z-index: 2; 
  }
    
  li {
    display: flex;
    align-items: stretch;
    
    flex: 0 1 auto;
    margin-right: 1px;
  }
  
    .breadcrumbItem {
      flex: 1 1 auto;
      position: relative;
      line-height: 50px;
      padding: 0 14px 0 25px;  /* 15px + arrow width */
      
      background-color: transparent;
      color: #fff;  /* or light blue? */
    }
    a {
      text-decoration: none;
      font-weight: bold;
    }   
    a:hover,
    a:focus {
      text-decoration: underline;
    } 
    
    .breadcrumbItem:before { 
      content: " "; 
      display: block; 
      width: 0; 
      height: 0;
      border-top: 60px solid transparent;       
      border-bottom: 60px solid transparent;
      border-left: 25px solid #d1dfdf;  /* FIXME */
      position: absolute;
      top: 50%;
      margin-top: -60px;
      left: -14px;
      z-index: 1; 
    }
    .breadcrumbItem:after { 
      content: " "; 
      display: block; 
      width: 0; 
      height: 0;
      border-top: 60px solid transparent;       
      border-bottom: 60px solid transparent;
      border-left: 25px solid #0b2a29;
      position: absolute;
      top: 50%;
      margin-top: -60px;
      left: calc(100% - 14px);
      z-index: 2; 
    }