将内角弧形边框添加到活动菜单

Question

我正在尝试为 active/selected 菜单创建一个内部弧形边框。下面的片段是迄今为止我能做的最好的，方角不应该是可见的。 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>

Answer 1

您可以尝试使用白色方块 :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/

Answer 2

我只是评论，但我不允许..这是你想要的效果吗？

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

看来您需要另一个伪元素。

Answer 3

这是我目前的解决方案。但我希望有更好的解决方案...我使用伪元素 active 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>

更新：我之前的回答需要更多 css 所以我编辑了它。根据 jbutler 的回答，我想到了添加 box-shadow 来隐藏角落。我在这里展示的原始 css 没有太大变化，我只是添加了框阴影。已更新 fiddle HERE.

Answer 4

下面是一个示例，说明如何结合旋转和框阴影来实现此目的：

最初，你有你的矩形 div/element:

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

由此，您可以在底角的任一侧放置一个伪元素，边界半径为 50%（形成一个圆）

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

因为我没有设置背景颜色，所以你不会看到这个。

我在两者上都设置了边框，但随后将其中三种侧面颜色设置为 'transparent'（这样您只能看到一个边框）。

旋转这意味着你可以使每边 'curved corner border':

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

然后使用框阴影意味着您可以隐藏 'elements bottom corner' 无论如何：

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

然后将底部边框颜色设置为活动元素本身意味着 'hidden' 无论如何：

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

演示

/*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>

备注

此处包含的 jquery 仅用于演示，展示了如何 'switch tabs'。

将内角弧形边框添加到活动菜单

Add inner corner curved border to active menu

html

css

css-shapes

演示