问题

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>

回答1:

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.

回答2:

You can try using a white square block :before and :after the li.active a element, and positioning it so it's between the radius and the 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/

This essentially just covers the square bottom corners of the li.active and #content elements by manipulating little square elements to cover them, but to be under the border-radius'd li.active:before and :after.

A more thorough explanation (courtesy atomictom's answer):

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

回答3:

Here is an example of how this could be achieved with a combination of rotation and box shadows:

Initially, you have your rectangular div/element:

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

From that, you can position a pseudo element either side of the bottom corners, with a border radius of 50% (to make a circle)

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

Because I haven't set a background colour, you won't see this.

I've set a border on both, but then set three of the side colours to 'transparent' (so you only see one border).

Rotating this means that you can make the 'curved corner border' for each side:

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

Using a box shadow then means you can hide the 'elements bottom corner' anyway:

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

Then setting the bottom border color to the active elelemtn itself means it is then 'hidden' anyway:

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

Note

the jquery included here is for demo only, and shows how you can 'switch tabs'.

回答4:

I'd just comment but I'm not allowed.. Is this the effect you're after?

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

Looks like you need another psuedo element.

来源：https://stackoverflow.com/questions/29595989/add-inner-corner-curved-border-to-active-menu

标签

html

css

css-shapes

Add inner corner curved border to active menu

问题

回答1:

回答2:

回答3:

DEMO

回答4: