如何解决有人可以向我解释为什么我的 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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
