<div class="center">
<ul class="crumb1">
  <li><a href="#">Level 1</a></li>
  <li><a href="#">Level 2</a></li>
  <li><a href="#">Level 3</a></li>
  <li><a href="#">Level 4</a></li>
  <li><a href="#">Level 5</a></li>
</ul><br>

<ul class="crumb2">
  <li style="border-radius: 50px 0 0 50px; padding-left: 15px;"><a href="#">Level 1</a></li>
  <li><a href="#">Level 2</a></li>
  <li><a href="#">Level 3</a></li>
  <li><a href="#">Level 4</a></li>
  <li style="border-radius: 0 50px 50px 0; padding-right: 15px;"><a href="#">Level 5</a></li>
</ul><br>
  
 <ul class="crumb3">
  <li><a href="#">Level 1</a></li>
  <li><a href="#">Level 2</a></li>
  <li><a href="#">Level 3</a></li>
  <li><a href="#">Level 4</a></li>
  <li><a href="#">Level 5</a></li>
</ul>
  
</div>

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body
{
  margin: 0;
  padding: 0;
  background: #222;
}

*
{
  font-family: poppins;
  text-decoration: none;
  user-select: none;
}

.center
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

a
{
  color: #fff;
}

.crumb1 li
{
  display: inline-block;
  padding: 15px;
  background: #3399ff;
  transform: skew(-20deg);
  cursor: pointer;
  opacity: 0.8;
}

.crumb1 li:hover
{
  opacity: 1;
}

.crumb1 li a
{
  display: block;
  transform: skew(20deg);
}

.crumb2 li
{
  display: inline-block;
  padding: 15px;
  background: orange;
  cursor: pointer;
  opacity: 0.8;
}

.crumb2 li:hover
{
  opacity: 1;
}
  
.crumb3 li
{
  display: inline-block;
  padding: 15px;
  background: #4CAF50;
  cursor: pointer;
  box-shadow: 0 9px #999;
  border-radius: 7px;
}

.crumb3 li:active
{
  box-shadow: 0 5px #666;
  transform: translateY(4px);
  background: #3e8e41;
}

.crumb3 li:hover
{
    background: #3e8e41;
}