如何在 HTML 中创建这种类型的导航栏

debugcn 发表于 Dev

阿鲁诺迪·辛格

我尝试使用 border-img 创建这种类型的导航栏，但无法实现。任何人都可以提供一些帮助或代码。

踢屁股

好的，我想我现在明白你的意思了。

我认为你应该有 2 个选项来制作倾斜的底部边框。

使用图像。所以示例站点的整个顶部标题是一个图像。

这包括与 facebook 横幅成一定角度的黑色部分和白色底部。这个图像必须是 png，因为它需要一个 alpha 层。PNG 图像的文件大小通常相对较大，这使得它不太吸引人，但实现起来要简单得多。

用 CSS 做这一切：

            html {
              height:100%;
            }
            body {
             height:100%;
             margin:0;padding:0;
            }
            h1,h2,p {
              color:white;
            }
            #header {
              /* Just the top banner */
              background-color:black;
              height:125px;
              text-align:left;
              padding-left:30px;
              color:white;
              font-size:50px;
              line-height:100px;
              -webkit-clip-path: polygon(0 0, 100% 0, 100% 75px, 0% 100%);
              clip-path: polygon(0 0, 100% 0, 100% 75px, 0% 100%);
            }
            #content {
              position:relative;
              top:-50px;
              height:calc(100% - 125px - 25px);
              min-height:350px;
              background:url(http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/dark_forest_wallpaper_landscape_nature_1138.jpg);
              background-attachment:fixed;
              background-sizing:100% 100%;
              padding:75px 75px 0 75px;
              -webkit-clip-path: polygon(0 70px, 100% 20px, 100% 100%, 0% 100%);
              clip-path: polygon(0 70px, 100% 20px, 100% 100%, 0% 100%);
            }
            .section {
              background-color:black;
              margin-top:-71px;
              padding:75px 75px 25px 75px;
              font-family:sans-serif;
            }
            .section > p {
              font-size:15px;
              padding:25px;
            }

    <html>
            <head>
            </head>
            <body>
               <div id='header'>
                  TEST
               </div>
              <div id='content'>
                <h1>Title H1</h1>
                <h2>TITLE H2</h2>
                <p>The quick brown fox jumps over the lazy dog</p>
              </div>
              <div class='section'>
                <h1>SUPERCONDUCTIVITY</h1>
                <p>
                  Superconductivity is a phenomenon of exactly zero electrical resistance and expulsion of magnetic flux fields occurring in certain materials, called superconductors, when cooled below a characteristic critical temperature. It was discovered by Dutch physicist Heike Kamerlingh Onnes on April 8, 1911, in Leiden. Like ferromagnetism and atomic spectral lines, superconductivity is a quantum mechanical phenomenon. It is characterized by the Meissner effect, the complete ejection of magnetic field lines from the interior of the superconductor as it transitions into the superconducting state. The occurrence of the Meissner effect indicates that superconductivity cannot be understood simply as the idealization of perfect conductivity in classical physics.
             
                <br>
                <br>
              
The electrical resistance of a metallic conductor decreases gradually as temperature is lowered. In ordinary conductors, such as copper or silver, this decrease is limited by impurities and other defects. Even near absolute zero, a real sample of a normal conductor shows some resistance. In a superconductor, the resistance drops abruptly to zero when the material is cooled below its critical temperature. An electric current through a loop of superconducting wire can persist indefinitely with no power source.
            
                <br>
                <br>
             
In 1986, it was discovered that some cuprate-perovskite ceramic materials have a critical temperature above 90 K (−183 °C). Such a high transition temperature is theoretically impossible for a conventional superconductor, leading the materials to be termed high-temperature superconductors. The cheaply-available coolant liquid nitrogen boils at 77 K, and thus superconduction at higher temperatures than this facilitates many experiments and applications that are less practical at lower temperatures.
                </p>
              </div>
            </body>
            </html>

PS：我是在 StackOverflow 上回答问题时学到的，所以这对我来说也是新闻。

奇迹般有效！！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。