gpt4 book ai didi

html - CSS 3D效果横幅

转载 作者:行者123 更新时间:2023-11-28 17:25:08 25 4
gpt4 key购买 nike

我想弄清楚如何说明在正文后面并在背景中继续显示的横幅。

我想实现这样的目标: enter image description here

但困难的部分是当它进入背景时的环绕(3D 效果)。

这是我目前得到的:https://jsfiddle.net/4v6xLtyf/

<body>
<div class="navbar background-banner">
</div>
<div class="body-content">
<div style="height:1000px" class="container content-block">
<h1 style="text-align: center">My Website</h1>

<div class="navbar navbar-inverse navbar-top navbar-custom-top">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Login</a></li>
</ul>
</div>
</div>
<p>Content goes here</p>
</div>
</div>
</body>

最佳答案

您可以使用 :before:afterborder 来完成这个技巧,接近您需要的东西可能是添加遵循 CSS 规则:

.navbar-custom-top:before {
content: "";
background-color: transparent;
width: 30px;
height: 50px;
position: absolute;
border-left: 25px solid transparent;
border-top: 31px solid #bb5911;
top: 50px;
left:0;
}
.navbar-custom-top:after {
content: "";
background-color: transparent;
width: 30px;
height: 50px;
position: absolute;
border-right: 25px solid transparent;
border-top: 31px solid #bb5911;
top: 50px;
right: 0;
}

Working fiddle

然后调整大小、位置和颜色以完全匹配您的需要。

关于html - CSS 3D效果横幅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40703403/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com