Подскажите как такое сделать на css

* { 
  list-style: none; 
  text-decoration: none; 
} 
 
html, 
body { 
  margin: 0; 
  padding: 0; 
} 
 
ul { 
  position: relative; 
  width: 500px; 
  margin: 0; 
  padding: 0; 
} 
 
ul:after { 
  content: ""; 
  position: absolute; 
  width: 100%; 
  height: 10px; 
  background: darkblue; 
  top: 100%; 
  left: 0; 
  border-top-right-radius: 4px; 
} 
 
li { 
  display: inline-block; 
  background: darkblue; 
  padding: 4px 14px 4px 6px; 
  margin: 0; 
  border-top-left-radius: 4px; 
  border-top-right-radius: 4px; 
  position: relative; 
} 
 
li a { 
  color: #fff; 
}

<ul> 
  <li><a href="">далее1</a></li> 
  <li><a href="">далее2</a></li> 
  <li><a href="">далее3</a></li> 
  <li><a href="">далее4</a></li> 
</ul>

.tabcl { 
  width: 100%; 
  position: relative; 
} 
 
.tabcl > span { 
  padding: 3px 9px; 
  background-color: #3399CC; 
  color: #f4f4f4; 
  border-top-left-radius: 3px; 
  border-top-right-radius: 3px; 
} 
 
.tabcl > span::after { 
  position: absolute; 
  top: 100%; 
  content: ' '; 
  display: block; 
  width: 100%; 
  height: 7px; 
  background-color: #3399CC; 
  border-top-right-radius: 3px; 
}

<div class="tabcl"> 
  <span>Прочее</span> 
</div>