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

【问题标题】：how to create this type of navbar in HTML如何在 HTML 中创建这种类型的导航栏
【发布时间】：2018-03-03 19:44:27
【问题描述】：

我尝试使用border-img 创建这种类型的导航栏，但无法成功。谁能提供一些帮助或代码。

【问题讨论】：

你说的是黄色菜单项/菜单吗？在 MEA-CUPPA 旁边？
您需要提供一些 HTML 和 CSS，以及您尝试过的内容以及无效的内容。 stackoverflow.com/help/mcve
@JuanTheron 导航栏的倾斜底部边框
那个黄色的小块？
哦，还有一件事，你已经有了一个例子，所以只需调试那个站点，看看他们是如何做到的。

标签： css border navbar

【解决方案1】：

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

我认为您应该有 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 上回答问题时了解到这一点，所以这对我来说也是新闻。

像魅力一样工作！！

【讨论】：