有人可以向我解释为什么我的 div 不会显示为三角形吗？ [复制]答案

【问题标题】：Can someone explain to me why my div won't appear as a triangle? [duplicate]有人可以向我解释为什么我的 div 不会显示为三角形吗？ [复制]
【发布时间】：2021-10-04 14:06:54
【问题描述】：

我正在尝试将我的空 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>

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

【问题讨论】：

如果您从 CSS 中删除评论及其下方的所有内容，则三角形可见。
你有宽度：0 和高度：0。它是隐形的！
问题是我在编辑器中没有这样写。我目前拥有的 css 只是评论上方的内容，我只在 sn-p 中将评论和 css 放在其下方以显示我尝试过的其他内容。话虽如此，即使没有评论以及它下面的所有内容，它仍然没有出现
我也试过改变宽度和高度，但没有成功

标签： html css css-shapes

【解决方案1】：

这样做

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 都在工作