你知道如何使用 CSS 做到这一点吗?
在我的导航栏中,我希望看到事件链接的透明三 Angular 形。 如果我创建一个带有透明三 Angular 形的 PNG 图像并像这样使用它:
background: rgba (0,0,0,0.4) url (triangle.png) no-repeat bottom center;
这不能正常工作,因为在我的三 Angular 形下显示透明的 rgba 颜色 rgba(0,0,0,0.4)
...
我想这样做是为了在滚动页面时产生不错的效果。有可能吗?
最佳答案
Demo
您可以使用 :before
和 :after
伪元素来实现此效果。
<nav>
<ul>
<li class="active">homepage</li>
<li>option2</li>
<li>option3</li>
</ul>
</nav>
nav {
position: fixed;
background-color: rgba(0,0,0,.7);
display: block;
width: 100%;
padding: 10px 0;
color: white;
font-size: 1.5em;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
float: left;
width: auto;
padding: 0 20px;
position: relative;
}
nav li:before,
nav li:after {
content: '';
position: absolute;
bottom: -35px;
left: 0;
right: 0;
height: 5px;
border: 10px transparent solid;
border-top-color: rgba(0,0,0,.7);
border-left-width: 0;
border-right-width: 0;
}
nav li:before {
right: 50%;
}
nav li:after {
left: 50%;
}
nav li.active:before {
border-right-width: 10px;
}
nav li.active:after {
border-left-width: 10px;
}
nav li:last-child:after { /* covers the bottom of the navigation bar all the way to the right */
right: -9999999px;
}
Another solution使用链接:
<nav>
<ul>
<li><a href="#" class="active">homepage</a></li>
<li><a href="#">option2</a></li>
<li><a href="#">option3</a></li>
</ul>
</nav>
关于html - 带有透明三 Angular 形的导航栏事件链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22267955/