按照下面的布局,我想激活这个链接。
下面是我的代码。到目前为止我已经做到了。
#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>
我只是不知道如何制作链接的另一边,即标题末尾的边。 我想到了一个可能的解决方案,但我想听听一些想法,也许有些是更可行的解决方案。
答案 0 :(得分:0)
这是我的解决方案:
/* 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>