Javascript 创建跨越两个导航栏的元素
我有两个导航条，看起来像这样： 我想添加一个横幅，这将有助于了解这个网站是一个测试网站。它是[ 我想添加一个跨越两个导航栏并在其上写入文本的字段。以下是我用于两个导航栏的代码：Javascript 创建跨越两个导航栏的元素,javascript,reactjs,typescript,react-bootstrap,Javascript,Reactjs,Typescript,React Bootstrap,我有两个导航条，看起来像这样： 我想添加一个横幅，这将有助于了解这个网站是一个测试网站。它是[ 我想添加一个跨越两个导航栏并在其上写入文本的字段。以下是我用于两个导航栏的代码： // First Navbar <Navbar className="navbar-top" fixed="top"> <Container> <Flex justify="flex-end" padding
// First Navbar
<Navbar className="navbar-top" fixed="top">
<Container>
<Flex justify="flex-end" padding="0 20px 0 0">
<NavDropdown onSelect={handleLanguageChange} alignRight title={language} id="basic-nav-dropdown">
<NavDropdown.Item eventKey="EN">EN</NavDropdown.Item>
<NavDropdown.Item eventKey="JP">JP</NavDropdown.Item>
</NavDropdown>
<NavDropdown onSelect={handleCurrencyChange} alignRight title={currency} id="basic-nav-dropdown">
<NavDropdown.Item eventKey="$ USD">$ USD</NavDropdown.Item>
<NavDropdown.Item eventKey="¥ JPY">¥ JPY</NavDropdown.Item>
</NavDropdown>
</Flex>
</Container>
</Navbar>
// Second Navbar
<Navbar variant="light" fixed="top" expand="lg" className="pt-4 pb-4 navbar-bottom">
<Container>
<Navbar.Brand href="/" className="d-none d-lg-block"><Image src={logo} width="200"></Image></Navbar.Brand>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link as={Link} to="/" className="nav-2 ml-xl-4">{t('home')}</Nav.Link>
<Nav.Link className="nav-2 ml-xl-4">{t('shop')}</Nav.Link>
<Nav.Link className="nav-2 ml-xl-4">{t('sale')}</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
//第一个导航栏
EN
太平绅士
美元
日元
//第二导航条
{t（'home'）}
{t（'shop'）}
{t（'sale'）}
我不知道如何跨越两个导航栏，并倾斜添加文本。只需像这样在它们上方添加一个横幅即可 CSS
.Sideways {
position:absolute; top:200px; left:50px; padding:5px; border:1px solid black;
width: 300px; /* make it wider if required here */
font-size: 35px;
text-align: center;
transform: rotateZ(-45deg);
}
<div class="Sideways">Test Site</div>
测试站点
或者您正在寻找的是一个多边形？：）下面是一个运行示例，您可以将div放置在html中正文的任何位置
<!DOCTYPE html>
<html>
<style>
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
position: absolute;
}
#test-site-logo {
position: absolute;
top: 33px;
transform: rotate(-45deg);
left: 14px;
}
</style>
<body>
<div id="triangle-topleft"></div>
<div id="test-site-logo">Test site</div>
</body>
</html>
#左上角三角形{
宽度：0；
身高：0；
边框顶部：100px纯红；
右边框：100px实心透明；
位置：绝对位置；
}
#测试场地标志{
位置：绝对位置；
顶部：33px；
变换：旋转（-45度）；
左：14px；
}
试验场地