Navigation bar

by Michael Danilov

HTML

<div class="blocks">
  <div class="block">Lorem ipsum</div>
  <div class="block">Dolor sit amet</div>
  <div class="block">Consectetur adipisicing elit</div>
</div>

SCSS

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  background-color: red;
}
.blocks {
  display: flex;
  flex-flow: row nowrap;
  margin: 10px;
  overflow: hidden;
}
.block {
  display: flex;
  align-items: center;
  position: relative;
  height: 60px;
  background-color: #fff;
  z-index: auto;
  padding-left: 30px;
  padding-right: 10px;
  
  &:first-child {
    padding-left: 20px;
  }
  &:last-child {
    &:before {
      display: none;
    }
  }
  &:before {
    content: '';
    position: absolute;
    right: -17px;
    top: -4px;
    border: 34px solid transparent;
    border-right: 0;
    width: 0;
    height: 0;
    display: block;
    border-left-color: gray;
    border-left-width: 15px;
    z-index: 2;
  }
  &:after {
    content: '';
    position: absolute;
    right: -15px;
    top: -4px;
    border: 34px solid transparent;
    border-right: 0;
    width: 0;
    height: 0;
    display: block;
    border-left-color: #fff;
    border-left-width: 15px;
    z-index: 3;
  }
  
  &:hover {
    cursor: pointer;
    background-color: gray;
    color: #fff;
    
    &:after {
      border-left-color: gray;
    }
  }
}