向这个元素添加向外弯曲的边框：◝◟___◞◜

Question

问题

我的导航栏看起来像这样：

HTML 和 CSS

nav {
  width: 1040px;
}
nav ul {
  display: block;
  list-style-type: none;
  height: 40px;
  border-top: 3px solid #222;
}
nav ul li {
  width: 130px;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  font-family: Vollkorn;
  font-weight: 400;
}
nav ul li a {
  display: block;
  text-decoration: none;
  color: #333;
}
nav ul li a:hover,
nav ul li a:focus {
  color: #000;
  box-shadow: 0px 0px 2px black;
  border-radius: 10px;
  border: 2px solid #222;
  border-top: 0px;
  transition: 0.2s ease all;
}

<nav>
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li>
      <a href="#">Random</a>
    </li>
    <li>
      <a href="#">Blog</a>
    </li>
    <li>
      <a href="#">About us</a>
    </li>
    <li>
      <a href="#">Contact Us</a>
    </li>
  </ul>
</nav>

期望输出

在上图中，列表项博客是重点关注或悬停的。在悬停样式中，它的边界半径为5px。问题是我希望左上角和右上角在悬停时向下弯曲，如下所示：

我可以使用背景图像，也可以使用位置样式和z-index来实现此结果。我想要一个CSS 仅限边框解决方案。

P.S。

所需的输出可能看起来不合适（至少对我而言），但我只是想知道是否可以这样做。

Answer 1

从我的头顶开始：在元素上绘制下半边框，并在定位的伪元素上绘制左上角和右上角。

/* using 4px border, 1em border radius, 1em padding */
nav ul {
  font: medium sans-serif;
  text-align: center;
  padding: 0;
  list-style-type: none;
  border-top: 4px solid;
}
nav li {
  display: inline-block;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-radius: 0 0 1em 1em;
  padding: 0 1em 1em;
  position: relative;
  top: 1em;
}
nav li:before,
nav li:after {
  display: none;
  content: "";
  position: absolute;
  top: -1em;
  width: 1em;
  height: 1em;
  margin-top: -4px;
}
nav li:before {
  right: 100%;
  border-top: 4px solid;
  border-right: 4px solid;
  border-top-right-radius: 1em;
}
nav li:after {
  left: 100%;
  border-top: 4px solid;
  border-left: 4px solid;
  border-top-left-radius: 1em;
}
nav li:hover {
  border-color: initial;
}
nav li:hover:before,
nav li:hover:after {
  display: block;
}

<nav>
  <ul>
    <li>Home</li>
    <li>Random</li>
    <li>Blog</li>
    <li>About us</li>
    <li>Contact Us</li>
  </ul>
</nav>

Answer 2

我有一个相当 hacky 的解决方案，如果你想这样称呼它。使用::before和::after伪元素在活动链接的左上角和右上角创建不可见的矩形（悬停或聚焦），边界半径设置在正确的边缘

nav {
  width: 1040px;
}
nav ul {
  display: block;
  list-style-type: none;
  height: 40px;
  border-top: 3px solid #222;
}
nav ul li {
  width: 130px;
  display: inline-block;
  line-height: 30px;
  padding-top: 10px;
  text-align: center;
  font-size: 16px;
  font-family: Vollkorn;
  font-weight: 400;
}
nav ul li a {
  display: block;
  text-decoration: none;
  color: #333;
  position: relative;
}
nav ul li a::before, nav ul li a::after {
  box-sizing: border-box;
  border-top: 2px solid #000;
  content: '';
  opacity: 0;
  position: absolute;
  top: -12px;
  width: 12px;
  height: 12px;
}
nav ul li a::before {
  border-top-right-radius: 10px;
  border-right: 2px solid #000;
  right: 100%;
}
nav ul li a::after {
  border-top-left-radius: 10px;
  border-left: 2px solid #000;
  left: 100%;
}
nav ul li a:hover,
nav ul li a:focus {
  color: #000;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 2px solid #222;
  border-top: none;
}
nav ul li a:hover::before, nav ul li a:hover::after,
nav ul li a:focus::before, nav ul li a:focus::after {
  opacity: 1;
}

<nav>
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li>
      <a href="#">Random</a>
    </li>
    <li>
      <a href="#">Blog</a>
    </li>
    <li>
      <a href="#">About us</a>
    </li>
    <li>
      <a href="#">Contact Us</a>
    </li>
  </ul>
</nav>

Answer 3

是的，很有可能：

＆＃13;

＆＃13;

#a{
    margin-top: 25px;
    position: relative;
    overflow: visible;
    white-space: nowrap;
    text-align: center;
    border: 3px solid black;
    border-top: none;
    border-radius: 0 0 25px 25px;
    margin-left: 25px;
    height: 50px;
}
#a, #a:after, #a:before{
    box-sizing: border-box;
    display: inline-block;
}
#a:after, #a:before{
    position: absolute;
    width: 25px;
    height: 25px;
    content: ".";
    color: transparent;
    border: 3px solid black;
    border-bottom: none;
    top: -25px;
}
#a:before{
    border-left: none;
    border-top-right-radius: 25px;
    left: -25px;
}
#a:after{
    border-right: none;
    border-top-left-radius: 25px;
    right: -25px;
}

＆＃13;

<div id="a">Hello</div>

＆＃13;

＆＃13;

＆＃13;

或者用LESS简化样式表：

#a {
    @round-width: 25px;
    @border-style: 3px solid black;

    @offset: -@round-width;

    &, &:after, &:before {
        box-sizing: border-box;
        display: inline-block;
    }

    position: relative;
    overflow: visible;
    white-space: nowrap;
    text-align: center;
    border: @border-style;
    border-top: none;
    border-radius: 0 0 @round-width @round-width;
    margin-left: @round-width;
    height: 50px;

    &:after, &:before {
        position: absolute;
        width: @round-width;
        height: @round-width;
        color: transparent;
        content: ".";
        border: @border-style;
        border-bottom: none;
        top: @offset;
    }

    &:before {
        border-left: none;
        border-top-right-radius: @round-width;
        left: @offset;
    }
    &:after {
        border-right: none;
        border-top-left-radius: @round-width;
        right: @offset;
    }
}

LESS的好处是你只提到一次基本选择器（#a），宽度也是如此。