creating a css triangle in percentage - html

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.

Answer 2

You can do triangles in CSS.
Here's a link to an article, outlining the general technique: http://css-tricks.com/snippets/css/css-triangle/. There's also a variety of similar/other approaches for slightly different situations I've found and used, just search "css triangles".
To briefly describe the technique: it uses four borders on an element (if you wanted a down arrow, you'd put this element inside your <div id="overV12">, or depending on the effect, apply it to your inner <div>). Some are transparent, some aren't. By changing the border widths and colors, you can generate CSS triangles, which can be fully customized to form different angle degrees, lengths, etc. I've also seen this concept used to create CSS-only speech bubbles as well as tooltip handles.
I've used this technique extensively, and in my use cases, it worked in every browser (although I do remember having a problem with IE6 on one project).

Answer 3

I found the solution by using javascript instead of percentage,
Fiddle
I hope this can help some other people as well
The java script i used is this:
$(document).ready(setSize());
function setSize() {
var halfWidth = ($('.div1').width()) / 2;
$('.div2').css('border-width', ('50px ' + halfWidth + 'px 0 ' + halfWidth + 'px'));
$('.div2').css('top', ($('.div1').height()));
}

Answer 4

its better to use a background image for custom shaped like this
it'll make it easier to manager and you can make it adjust itself for different resolutions easily