<ul class="breadcrumb">
  <li class="breadcrumb__item breadcrumb__item-1">
    <span class="breadcrumb__icon icon-sword"></span>
    <span class="breadcrumb__title">Monster Hunter</span>
  </li>
  <li class="breadcrumb__item breadcrumb__item-2">
    <span class="breadcrumb__icon icon-sword"></span>
    <span class="breadcrumb__title">Zombie Hunter</span>
  </li>
  <li class="breadcrumb__item breadcrumb__item-3">
    <span class="breadcrumb__icon icon-sword"></span>
    <span class="breadcrumb__title">Final Fantasy</span>
  </li>
</ul>
body {
  background: #111;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Oswald", sans-serif;
}

.breadcrumb {
  text-align: center;
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  flex-wrap: nowrap;
}

.breadcrumb__item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  height: 60px;
  padding: 5px 10px 5px 55px;
  position: relative;
  transition: 500ms;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}

.breadcrumb__title {
  z-index: 10;
}

.breadcrumb__item-1 {
  padding-left: 30px;
  border-radius: 5px 0 0 5px;
  background: white;
  color: #252525;
}

.breadcrumb__item-2 {
  background: #202222;
  color: #fff;
}

.breadcrumb__item-3 {
  border-radius: 0 5px 5px 0;
  padding-right: 25px;
  background: white;
  color: #252525;
}

.breadcrumb__item-1::after,
.breadcrumb__item-2::after {
  width: 0;
  height: 0;
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
  content: "";
  position: absolute;
  top: -5px;
  right: -30px;
  z-index: 1;
}

.breadcrumb__item-1::after {
  border-left: 35px solid #fff;
}

.breadcrumb__item-2::after {
  border-left: 35px solid #202222;
}

.breadcrumb__icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  margin-right: 10px;
  display: inline-block;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 10;
}

.icon-sword {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg fill='%2387d2f3'%3E%3Cpath d='M373.332 320H95.999c-74.667 0-85.333-85.333-85.333-85.333h362.667V320zM426.666 256h74.667v42.667h-74.667V256z'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cpath d='M394.666 298.667h-21.333V256h53.333v42.667h-32zM298.666 138.667V416c0 74.667-85.333 85.333-85.333 85.333V138.667h85.333z'/%3E%3C/g%3E%3Cpath fill='%2387d2f3' d='M234.666 10.667h42.667v74.667h-42.667V10.667z'/%3E%3Cpath fill='%23fff' d='M277.332 117.333v21.333h-42.667V85.333h42.667v32z'/%3E%3Cg fill='%232170a6'%3E%3Cpath d='M341.332 170.667v-21.333c0-11.782-9.551-21.333-21.333-21.333h-32V96h21.333V74.667h-21.333v-64C287.999 4.776 283.223 0 277.332 0h-42.667c-5.891 0-10.667 4.776-10.667 10.667v64h-21.333V96h21.333v32h-32c-11.782 0-21.333 9.551-21.333 21.333v21.333h21.333v-21.333h10.667v352c0 5.891 4.776 10.667 10.667 10.667.442-.002.884-.03 1.323-.085 32.747-4.096 94.677-29.408 94.677-95.915V149.333h10.667v21.333h21.333zm-96-149.334h21.333v53.333h-21.333V21.333zm0 74.667h21.333v32h-21.333V96zm42.667 320c0 49.067-42.528 66.539-64 72.245V149.333h64V416z'/%3E%3Cpath d='M245.332 266.667h21.333v170.667h-21.333V266.667zM245.332 224h21.333v21.333h-21.333V224zM245.332 181.333h21.333v21.333h-21.333v-21.333zM2.666 227.605C.643 229.9-.297 232.953.085 235.989 4.181 268.736 29.493 330.666 96 330.666h85.333v-21.333H95.999c-49.067 0-66.539-42.528-72.245-64h157.579V224H10.666c-3.061-.002-5.974 1.312-8 3.605zM362.666 192h-21.333v21.333h21.333V224h-32v21.333h32v64h-32v21.333h32v10.667h-21.333v21.333h21.333c11.782 0 21.333-9.551 21.333-21.333v-128c0-11.782-9.551-21.333-21.333-21.333z'/%3E%3Cpath d='M74.666 266.667h106.667V288H74.666v-21.333zM501.332 245.333h-64V224h-21.333v21.333h-21.333v21.333h21.333V288h-21.333v21.333h21.333v21.333h21.333v-21.333h64c5.891 0 10.667-4.776 10.667-10.667V256c0-5.891-4.776-10.667-10.667-10.667zM490.666 288h-53.333v-21.333h53.333V288z'/%3E%3C/g%3E%3C/svg%3E");
}

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.