Ответ 1

Это мое решение. Но я надеюсь, что там есть лучшее решение... Я использую псевдоэлемент активного a для создания белой границы, чтобы скрыть острый угол.

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:50% 0;
  border-width:0 1px 1px 0;
  box-shadow: 1px 1px white;
}
ul li.active:after {
  right:-10px;
  border-radius: 0 50%;
  border-width:0 0 1px 1px;
  box-shadow: -1px 1px white;
}

.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>

Ответ 2

Вы можете использовать белый квадратный блок :before и :after элемент li.active a и позиционировать его так, чтобы он находился между радиусом и li:

ul li.active a:before,
ul li.active a:after {
  content: "";
  position: absolute;
  background-color: white;
  height: 11px;
  width: 10px;
  bottom: -1px;
}

ul li.active a:before {
  left: -6px;
  z-index: 1;
}
ul li.active a:after {
  right: -6px;
  background-color: white;
  z-index: 6;
}

ul li.active:before {
  left:-10px;
  border-radius:8px 0;
  border-width:0 1px 1px 0;
  z-index: 5; // <<< This too
}
ul li.active:after {
  right:-10px;
  border-radius: 0 8px;
  border-width:0 0 1px 1px;
  z-index: 10; // <<< And here
}

http://jsfiddle.net/be5ceL9z/4/

Это, по существу, просто покрывает квадратные нижние углы элементов li.active и #content, манипулируя небольшими квадратными элементами, чтобы покрыть их, но находиться под граничным радиусом li.active:before и :after.

Более подробное объяснение (любезность atomictom ответ):

https://css-tricks.com/tabs-with-round-out-borders/

Ответ 3

Вот пример того, как это может быть достигнуто с помощью комбинации поворота и теней коробки:

Изначально у вас есть прямоугольный div/element:

    +---------+
    | ELEMENT |
    +---------+

Из этого вы можете позиционировать псевдоэлемент с обеих сторон нижних углов с радиусом границы 50% (чтобы сделать круг)

    +---------+
    | ELEMENT |
   O+---------+O

Поскольку я не задал цвет фона, вы не увидите этого.

Я установил границу для обоих, но затем установил три цвета сторон в "прозрачный" (так что вы видите только одну рамку).

Вращение означает, что вы можете сделать "изогнутую границу угла" для каждой стороны:

    +---------+
    | ELEMENT |
   )+---------+(

Использование тени окна означает, что вы можете скрыть "нижний угол элементов":

    +---------+
    | ELEMENT |
   ) --------- (

Затем установка цвета нижней границы для активного элемента elelemtn означает, что он тогда "скрыт":

    +---------+
    | ELEMENT |
    )         ( <-- rotated slightly to create your corner

DEMO

/*FOR DEMO ONLY*/


$(document).ready(function() {
  $('.menu div').click(function() {
    $('.menu div').removeClass("act");
    $(this).addClass("act");
  });
});

html {
  background: lightgray;
}
.menu div {
  display: inline-block;
  height: 50px;
  width: 100px;
  background: white;
  margin: 10px;
  position: relative;
  text-align: center;
  border-radius: 10px 10px 0 0;
  border: 2px solid black;
  cursor:pointer;
}
.menu .act {
  border-bottom-color: white;
  z-index: 40;
}
.act:before,
.act:after {
  content: "";
  position: absolute;
  bottom: -2px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  z-index: 30;
}
.act:before {
  left: 100%;
  border-left-color: black;
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  transform: rotate(-40deg);
  box-shadow: -20px 2px 0 0 white;
}
.act:after {
  right: 100%;
  border-right-color: black;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  transform: rotate(40deg);
  box-shadow: 20px 2px 0 0 white;
}
.panel {
  width: 80vw;
  margin-top: -12px;
  background: white;
  border-top: 2px solid black;
  z-index: 20;
  padding-top: 12px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <div>1</div>
  <div class="act">2</div>
  <div>3</div>
</div>

<div class="panel">Don't you wish Tabs could just be easy?</div>

Ответ 4

Я бы просто прокомментировал, но мне не позволено. Это эффект, который вы после?

https://css-tricks.com/tabs-with-round-out-borders/

Похоже, вам нужен еще один элемент psuedo.