Я пытаюсь создать внутреннюю изогнутую границу для активного/выбранного меню. Ниже фрагмента пока что все, что я могу сделать, квадратный угол не должен быть виден. Решения от google, похоже, не помогают... Пожалуйста, помогите мне поиграть с ним. Спасибо, парни!
body {
background:#eee;width:90%;margin:20px auto
}
ul {
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
list-style: none;
position: relative;
vertical-align:bottom;
}
ul li a {
padding: 10px 15px;
display: block;
line-height: 25px;
margin-bottom:-1px;
}
ul li.active a {
background:#fff;
border:1px solid #aaa;
border-bottom:0;
border-radius:5px 5px 0 0;
}
ul li.active:before,
ul li.active:after {
content:"";
position:absolute;
bottom:-1px;
width:10px;
height:10px;
border:solid #aaa;
}
ul li.active:before {
left:-10px;
border-radius:8px 0;
border-width:0 1px 1px 0
}
ul li.active:after {
right:-10px;
border-radius: 0 8px;
border-width:0 0 1px 1px;
}
.content {
border:1px solid #aaa;background:#fff;height:200px
}
<ul>
<li><a href="#">tab 1</a></li>
<li class="active"><a href="#">tab2</a></li>
<li><a href="#">tab3</a></li>
<li><a href="#">tab4</a></li>
</ul>
<div class="content"></div>