将内角曲线边框添加到活动菜单 [英] Add inner corner curved border to active menu

问题描述

我试图为活动/选择菜单创建内部弯曲边框。下面的片段是到目前为止我能做的最好的，方角不应该可见。来自google的解决方案似乎不帮助...请帮助我玩它。多谢你们！

FIDDLE HERE。

 body {background：#eee; width：90％; margin：20px auto} ul {margin：0; padding：0;} ul li {display：inline-block; list-style：none;位置：相对; vertical-align：bottom;} ul li a {padding：10px 15px;显示：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 =＃>标签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>  
 

解决方案

但我希望有一个更好的解决方案在那里...我使用活动 a的伪元素创建一个白色边框隐藏尖角。

  body {background：#eee; width：90％; margin：20px auto} ul {margin：0; padding：0;} ul li {display：inline-block; list-style：none;位置：相对; vertical-align：bottom;} ul li a {padding：10px 15px;显示：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 =＃>标签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>  

UPDATE：我以前的答案需要更多的CSS，所以我编辑它。基于jbutler的答案，我想到添加 box-shadow 来隐藏角落。没有什么改变在原来的css我在这里，我只是添加了盒子阴影。更新了小提示这里。

I am trying to create an inner curved border for active/selected menu. Below snippet is so far the best I can do, the square corner shouldn't be visible. Solutions from google doesn't seem to help... Please help me play with it. Thanks guys!

FIDDLE HERE.

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>

解决方案

This is my solution so far. But I am hoping there is a better solution out there... I use the pseudo element of active a to create a white border to hide the sharp corner.

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>

UPDATE: My previous answer requires more css so I edited it. Based on the answer of jbutler, I got the idea about adding box-shadow to hide the corners. Nothing much changed on the original css I presented here, I just added the box-shadow. Updated fiddle HERE.

这篇关于将内角曲线边框添加到活动菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！