Positioning a CSS Triangle as a border

Question

So the last three CSS lines of #LI_3 have border properties to make a triangle. But I cannot for the life of me figure out how to position that triangle so that it is below sitting on the bottom of the nav-bar and pointing to the hyperlink. Any help would be hugely appreciated! Apologies for the weirdly formatted CSS, it is auto extracted rather than manual copy pasting due to the way my site is structured.

#NAV_1 {
  box-sizing: border-box;
  height: 62px;
  width: 1362px;
  perspective-origin: 681px 31px;
  transform-origin: 681px 31px;
  background: rgb(238, 60, 36) none repeat scroll 0% 0% / auto padding-box border-box;
  font: normal normal normal normal 16px / 22px'Open Sans', sans-serif;
  margin: 0px 0px -80px;
}
/*#NAV_1*/

#UL_2 {
  box-sizing: border-box;
  height: 62px;
  max-width: 1200px;
  width: 1200px;
  perspective-origin: 600px 31px;
  transform-origin: 600px 31px;
  font: normal normal normal normal 16px / 22px'Open Sans', sans-serif;
  list-style: none outside none;
  margin: 0px 81px 40px;
  padding: 20px 15px;
}
/*#UL_2*/

#LI_3 {
  box-sizing: border-box;
  display: inline-block;
  height: 22px;
  width: 75.6875px;
  perspective-origin: 37.8438px 11px;
  transform-origin: 37.8438px 11px;
  font: normal normal normal normal 16px / 22px'Open Sans', sans-serif;
  list-style: none outside none;
  border-style: solid;
  border-width: 0 40px 20px 40px;
  border-color: transparent transparent #ffffff transparent;
}
/*#LI_3*/

#A_4,
#A_6,
#A_8 {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  text-align: left;
  text-decoration: none;
  border: 0px none rgb(255, 255, 255);
  font: normal normal bold normal 16px / 22px'Open Sans', sans-serif;
  list-style: none outside none;
  outline: rgb(255, 255, 255) none 0px;
  transition: all 0.2s ease 0s;
}
/*#A_4, #A_6, #A_8*/

#LI_5 {
  box-sizing: border-box;
  display: inline-block;
  height: 22px;
  width: 124.203px;
  perspective-origin: 62.0938px 11px;
  transform-origin: 62.0938px 11px;
  font: normal normal normal normal 16px / 22px'Open Sans', sans-serif;
  list-style: none outside none;
  margin: 0px 0px 0px 46px;
}
/*#LI_5*/

#LI_7 {
  box-sizing: border-box;
  display: inline-block;
  height: 22px;
  width: 114.25px;
  perspective-origin: 57.125px 11px;
  transform-origin: 57.125px 11px;
  font: normal normal normal normal 16px / 22px'Open Sans', sans-serif;
  list-style: none outside none;
  margin: 0px 0px 0px 46px;
}
/*#LI_7*/

<nav id="NAV_1">
  <ul id="UL_2">
    <li id="LI_3">
      <a href="http://website.com/solutions/product/#overview" id="A_4">Overview</a>
    </li>
    <li id="LI_5">
      <a href="http://website.com/solutions/product/technology/#technology" id="A_6">The Technology</a>
    </li>
    <li id="LI_7">
      <a href="http://website.com/solutions/product/right-fit/#isitright" id="A_8">Right For You?</a>
    </li>
  </ul>
</nav>

Answer 1

You have a lot of wierd stuff in your css (including UPPERCASE class names) which is not needed??

I would recommend using pseudo elements :before & :after for this sort of behavior.

Ive updated your code and added the triangle on hover of the nav items.

* {
  display: border-box;
}
ul {
  list-style: none;
}
#NAV_1 {
  background: red;
}
#UL_2 {
  display: flex;
  align-items: flex-start;
}
#UL_2 a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 1em 2em;
  position: relative;
}
/*
If you want to display this just over the #LI_3 as a permanent triangle then replace the "#UL_2 a:hover:after" with "#LI_3 a:after"
*/
#UL_2 a:hover:after {
  content: "";
  border-style: solid;
  border-width: 12px;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

<nav id="NAV_1">
  <ul id="UL_2">
    <li id="LI_3">
      <a href="http://website.com/solutions/product/#overview" id="A_4">Overview</a>
    </li>
    <li id="LI_5">
      <a href="http://website.com/solutions/product/technology/#technology" id="A_6">The Technology</a>
    </li>
    <li id="LI_7">
      <a href="http://website.com/solutions/product/right-fit/#isitright" id="A_8">Right For You?</a>
    </li>
  </ul>
</nav>