有人可以向我解释为什么我的 div 不会显示为三角形吗？

问题描述

我试图将我的空 div 变成一个三角形，但我尝试过的一切都产生了相同的结果，什么都没有。我希望有一双新的眼睛可以告诉我我错过了什么。

body {
  background-color: #0A3D75;
  width: 100vw;
  height: 100vh;
}

header {
  width: 100vw;
  height: 100vh;
}

.shape {
  width: 0;
  height: 0;
  border-top: 100px solid #E07D00; 
  border-right: 100px solid transparent;
  border-left: 0 solid transparent;
}

/*I've also tried this*/

.shape {
  border-color: transparent transparent transparent #E07D00;
  border-style: solid;
  border-width: 100px 100px 0 0;
  height: 0px;
  width: 0px;
}

<body>
    <header>
      <div class="menu">
        <ul>
          <li id="about"><a href="about.html">About</a></li>
          <li id="portfolio"><a href="portfolio.html">Portfolio</a></li>
          <li id="contact"><a href="contact.html">Contact</a></li>
        </ul>
      </div>
      <h1>Alex Wilbur</h1>
      <p>UI Designer/Front-end Developer - Graphic Artist - Indie Game Developer</p>
      <h2>Imagination brought to life</h2>
      <div class="shape"></div>
    </header>
  </body>

我也尝试过更改正文和标题的宽度和高度，但也没有任何效果。有什么建议吗？

解决方法

这样做

body {
  background-color: #0A3D75;
  width: 100vw;
  height: 100vh;
}

header {
  width: 100vw;
  height: 100vh;
}

.shape {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid black;
}

<body>
    <header>
      <div class="menu">
        <ul>
          <li id="about"><a href="about.html">About</a></li>
          <li id="portfolio"><a href="portfolio.html">Portfolio</a></li>
          <li id="contact"><a href="contact.html">Contact</a></li>
        </ul>
      </div>
      <h1>Alex Wilbur</h1>
      <p>UI Designer/Front-end Developer - Graphic Artist - Indie Game Developer</p>
      <h2>Imagination brought to life</h2>
      <div class="shape"></div>
    </header>
  </body>

css-shapes html