creating a css triangle in percentage

Question

I am trying to create a div that is square on the top site and flows into a triangle,

the square part is not so hard, and works fine, but the triangle part is a bit harder. The box needs to change from size with the screen size, in the square i did this by using % in the width and height, but i cannot use the % sign in the border property

The code i have on this moment

HTML

 <div id="overV12" class="menuItem" onclick="scrollToT('#overons')" onmouseover="setHover('overV12')" onmouseout="setOldClass('overV12')"><div class="menuInner">Over V12</div></div> 

CSS

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;    
}

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 height

i hope someone can help me (and perhaps others) with this problem

jsfiddle example My idea is that when the div is set on class menuItemActive, it will have the arrow, else not This is only when it is set on active

Answer 1

This uses two overlapping divs to create the triangle and this method to make things fluid while maintaining the aspect ratio.

Working Example

.div1 {
    width:100%;
    height:100%;
    border: 1px solid red;
    position:absolute;
    z-index:2;
}
.div2 {
    width:70%;
    min-height:70%;
    transform:rotate(45deg);
    border:1px solid blue;
    position:absolute;
    left:15%;
    top:65%;
    z-index:1;
}
#container {
    display: inline-block;
    position: relative;
    width: 25%;
}
#dummy {
    padding-top: 100%;
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

I left it without a background so you could see how it works.