Вариант другой - псевдоэлементы. Но, если у вас глаз настолько алмаз, что различия ширины в 1px
- это слишком, то он не для вас.
Суть - у li.active
нет border-radius
, к первому и последнему элементу меню присваиваем дополнительный класс, который обеспечивает их соответствующими псевдоэлементами с абсолютным позиционированием. Сдвиаем их(псевдоэлементы) на 1px
, скрывая все, что нужно скрыть. Профит, вы великолепны.
http://codepen.io/malginovdesign/pen/KzXWQN?editors=1100
/* оформление */
* {
box-sizing: border-box;
}
div {
background: darkgrey;
padding: 0 20px;
width: 800px;
margin: 0 auto;
border-radius:4px;
}
a {
text-decoration:none;
color: #f9f9f9;
}
/* объект */
ul {
display:inline-block;
height:50px;
line-height:50px;
padding: 0;
border-radius:4px;
width: 100%;
background: #333;
}
li {
display:inline-block;
list-style:none;
width: calc(100% / 5);
text-align:center;
position: relative;
}
.active.first-link:before {
content: '';
position: absolute;
top: 0;
left: -1px;
height: 100%;
width: 5px;
background: darkorange;
border-radius: 4px 0 0 4px;
}
.active.last-link:after {
content: '';
position: absolute;
top: 0;
right: -2px;
height: 100%;
width: 5px;
background: darkorange;
border-radius: 0 4px 4px 0;
}
.active {
background-color: darkorange;
}
<div>
<ul>
<li class="active first-link"><a href="#">текст 1</a>
<li class="no-active"><a href="#">текст 2</a>
<li class="active"><a href="#">текст 2</a>
<li class="no-active"><a href="#">текст 2</a>
<li class="active last-link"><a href="#">текст 2</a>
</ul>
</div>