Can someone explain to me why my div won't appear as a triangle?

Question

I am trying to turn my empty div into a triangle but everything I've tried produces the same result, nothing. I'm hoping a fresh set of eyes can tell me what I'm missing.

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>

I have also tried changing the width and height of the body and header but that also did nothing. Any suggestions?

The triangle is visible if you remove your comment and everything below it from your CSS. — Rounin, Jul 28 '21 at 20:50
The thing is I didn't write it like that in my editor. The css I have currently is just what is above the comment, I only put the comment and css below it in the snippet to show other things I have tried. With that being said even without the comment and everything below it it's still not showing up — Alx_Wil95, Jul 28 '21 at 20:55
I've tried changing the width and height too with no success — Alx_Wil95, Jul 28 '21 at 20:56

score 0 · Answer 1 · answered Jul 28 '21 at 20:58

Do it like this

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>

I've tried that too but it still won't show up when I put it in my editor. All my other css is working though — Alx_Wil95, Jul 28 '21 at 21:04

Can someone explain to me why my div won't appear as a triangle?

1 Answers1