creating a css triangle in percentage

[Maggs]

I am trying to create a div that is square on the tup site and flows into a triangle,the sqaure part is not so hard, and works fine, but the triagle part is a bit harder.The box needs to change from size with the screen size, in the squery i did this by using % in the width and height, but i cannon use the % sign in the border propertyThe code i have on this momentHTML\[code\] <div id="overV12" class="menuItem" onclick="scrollToT('#overons')" onmouseover="setHover('overV12')" onmouseout="setOldClass('overV12')"><div class="menuInner">Over V12</div></div> \[/code\]CSS\[code\]div.menuItem {height: 5.38%;width: 7.44%;position: fixed;background-color: rgb(239, 239, 239);cursor: pointer;z-index: 12;text-align: center;top: 4.3%;}div.menuItemHover{height: 5.38%;width: 7.44%;position: fixed;cursor: pointer;z-index: 12;text-align: center;top: 4.3%;background-color: rgb(211, 211, 211);}div.menuItemActive{height: 7.8%;width: 7.44%;position: fixed;cursor: pointer;z-index: 12;text-align: center;top: 4.3%;background-color: Black;color: White; }\[/code\]The JavaScript is used for setting the class i did this because i use a parralax library and wanted to set the button on "active"on a certain heighti hope someone can help me (and perhaps others) with this problemjsfiddleexampleMy idee is that when the div is set on class menuItemActive, it wil ave the arrow, else notThis is only when it is set on active