舍入已受边界半径影响的角落

Question

下面的第一张图片显示了我想要实现的结果。 （您现在可以忽略重叠的标签页）

现在，我已经做了以下。黄色的高位是我想要完善的，这将如何实现？

以下是在活动标签上执行的CSS。

.productTabs>li.active>a, .productTabs>li.active>a:hover, .productTabs>li.active>a:focus {
  color: #fff !important;
  border: none;
  border-bottom-color: transparent;
  cursor: default;
  background: linear-gradient(225deg,transparent 29px,#1c83c6 5px)!important;
  text-transform: uppercase;
}

JsFiddle：https://jsfiddle.net/zc23s9j1/