html 百分比正方形,html – 以百分比形式创建一个css三角形

我试图在顶部网站上创建一个正方形的div并流入三角形,

方形部分不是那么难,并且工作正常,但三角形部分有点难.

盒子需要改变大小与屏幕尺寸,在广场我这样做通过使用宽度和高度％,但我不能使用边框属性中的％符号

我现在的代码

Over V12

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;

}

JavaScript用于设置类：我这样做是因为我使用parralax库并且想要在某个高度上将“按钮”设置为“活动”

我希望有人可以帮我(也许还有其他人)解决这个问题

的jsfiddle

example

我的想法是,当在类menuItemActive上设置div时,它将有箭头,否则不是

仅当它设置为活动时才会这样