css - 关于布局的想法/解决方案

Question

按照下面的布局，我想激活这个链接。

下面是我的代码。到目前为止，我已经设法做到了。

#header {}

#header_container {
  height: 100vh;
  background: linear-gradient(to top, #fc4a1a, #f78b33);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding: 0 calc(1vh + .2vw);
}


/* Menu || Nav tag */

#header_menu {}


/* a */

#header_menu a {
  display: block;
  text-align: center;
  padding: calc(1vh + .2vw);
}


/* i */

#header_menu a i {
  margin-bottom: calc(.3vh + .1vw);
}

#header_menu .activeLink i {
  padding: calc(.2vw + 0vw) 0;
}


/* i and span */

#header_menu a i,
#header_menu a span {
  display: block;
  color: var(--black-20);
  position: relative;
  z-index: 9;
}


/* Active link */

#header_menu .activeLink i::after {
  content: "";
  width: 150%;
  height: 100%;
  background-color: #fff;
  border-top-left-radius: calc(2vh + .5vw);
  border-bottom-left-radius: calc(2vh + .5vw);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -9;
}

<!-- Header -->
<header id="header">
  <div id="header_container">
    <!-- Menu -->
    <nav id="header_menu">
      <!-- Link -->
      <a href="" class="activeLink">
        <i class="material-icons">
                        home
                    </i>
        <span>
                        Início
                    </span>
      </a>

      <!-- Link -->
      <a href="">
        <i class="material-icons">
                        home
                    </i>
        <span>
                        Início
                    </span>
      </a>

      <!-- Link -->
      <a href="">
        <i class="material-icons">
                        home
                    </i>
        <span>
                        Início
                    </span>
      </a>
    </nav>
  </div>
</header>

我只是不知道如何制作链接的另一边，即标题末尾的边。我想到了一个可能的解决方案，但我想听听一些想法，也许有些是更可行的解决方案。

标签： css

Answer 1

那是我的解决方案：

/* Active link */
/* Icon */
#header_menu .activeLink i{
    padding: calc(.2vw + 0vw) 0;
}
#header_menu .activeLink i::after{
    content: "";

    width: 150%;
    height: 100%;

    background-color: #fff;
    border-top-left-radius: calc(2vh + .5vw);
    border-bottom-left-radius: calc(2vh + .5vw);

    position: absolute;
    top: 0;
    left: 0;
    z-index: -9;
}
/* Top and bottom */
.header_menu_link_borderRadiusTop,
.header_menu_link_borderRadiusBottom{
    width: 15px;
    height: 15px;

    position: absolute;
}
/* Top white and bottom white */
.header_menu_link_borderRadiusTop_white,
.header_menu_link_borderRadiusBottom_white{
    height: 20px;

    background-color: #fff;

    right: -55%;
}
/* Top orange and bottom orange */
.header_menu_link_borderRadiusTop_orange,
.header_menu_link_borderRadiusBottom_orange{
    background-color: #f78b33;

    right: -51.56%;
}
/* Top */
.header_menu_link_borderRadiusTop_white{
    top: -35%;
}
.header_menu_link_borderRadiusTop_orange{
    border-bottom-right-radius: calc(2vh + .5vw);

    top: -50%;
    z-index: 99;
}
/* Bottom */
.header_menu_link_borderRadiusBottom_white{
    bottom: -35%;
}
.header_menu_link_borderRadiusBottom_orange{
    border-top-right-radius: calc(2vh + .5vw);

    bottom: -50%;
}

<!-- Link -->
<a href="" class="activeLink">
    <i class="material-icons">
        <span class="header_menu_link_borderRadiusTop header_menu_link_borderRadiusTop_white"></span>
        <span class="header_menu_link_borderRadiusTop header_menu_link_borderRadiusTop_orange"></span>
        
        home
        
        <span class="header_menu_link_borderRadiusBottom header_menu_link_borderRadiusBottom_white"></span>
        <span class="header_menu_link_borderRadiusBottom header_menu_link_borderRadiusBottom_orange"></span>
    </i>
    <span class="header_menu_link_text">
        Início
    </span>
</a>