塑造导航栏的底部边框
问题描述:
我想要塑造导航包装的底部边框,以便在其中心弹出一个三角形(例如下图)。塑造导航栏的底部边框
有没有办法通过编辑/转换关于底部边界的导航包装器的CSS来创建此形状?
三角形与nav包装具有相同的不间断背景图案和底部边框投影,所以我认为这应该通过CSS转换完成,而不是在边框上添加CSS /图像形状。
IE:
谢谢!
答
您可以使用CSS伪元素:before
& :after
为此。请下面的代码片段看看:
.nav-bar {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
background: #33b5e5;
color: #fff;
font-size: 50px;
font-weight: 700;
border-bottom: 6px solid #8ACEE9;
position: relative;
}
.nav-bar:after {
content: '';
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #33b5e5;
}
.nav-bar:before {
content: '';
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid #8ACEE9;
}
<div class="nav-bar">
Navbar
</div>
希望这有助于!
+0
太棒了!关于这件事,谢谢 - 你知道如何在边框上添加背景图片,以便图片被遮挡到三角形上吗? –
可能重复的[中心三角在底部](http://*.com/questions/19719048/center-triangle-at-bottom-of-div) – Sam07