我试图把我的空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>