文章/答案/技术大牛

发布

社区首页 >问答首页 >创建跨越两个导航栏的元素

问创建跨越两个导航栏的元素
EN

Stack Overflow用户

提问于 2021-05-11 17:15:18

回答 2查看 23关注 0票数 0

我有两个导航栏，如下所示：

我想添加一个横幅，这将有助于理解这个网站是一个测试网站。它是[

我想添加一个跨越两个导航栏的字段，并在其上写入文本。下面是我用于两个导航栏的代码：

// 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>

我不知道如何跨越两个导航栏，并倾斜地添加文本。

javascript

reactjs

typescript

react-bootstrap

回答 2

Stack Overflow用户

发布于 2021-05-11 17:26:21

只需在它们上面添加一个横幅，就像这样..

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);
}

HTML

<div class="Sideways">Test Site</div>

或者它是您正在寻找的多边形？:)

票数 0

Stack Overflow用户

发布于 2021-05-11 19:25:07

这是运行中的示例，您可以将div放在body中的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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67483835

复制

相似问题

问创建跨越两个导航栏的元素
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建跨越两个导航栏的元素EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建跨越两个导航栏的元素
EN