我正在尝试塑造导航包装器的底部边框,以便在其中心弹出一个三 Angular 形(例如下图)。
有没有一种方法可以通过编辑/转换导航包装器关于底部边框的 CSS 来创建这种形状?
三 Angular 形具有与导航包装相同的不间断背景图案和底部边框阴影,所以我认为这应该通过 CSS 转换来完成,而不是在边框上添加 CSS/图像形状。
即:
谢谢!
最佳答案
为此,您可以使用 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>
希望这对您有所帮助!
关于css - 塑造导航栏的底部边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40532753/