html - 以百分比创建一个CSS三 Angular 形

Question

我正在尝试在顶部网站上创建一个正方形并流入三 Angular 形的 div，

正方形部分不那么难，做工很好，但三 Angular 形部分有点难。盒子的大小需要随着屏幕大小而改变，在正方形中我通过在宽度和高度中使用 % 来做到这一点，但是我不能在边框属性中使用 % 符号

我这一刻的代码

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

JavaScript 用于设置类:我这样做是因为我使用视差库并想在特定高度上将按钮设置为“事件”

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

jsfiddle example我的想法是，当在类 menuItemActive 上设置 div 时，它将有箭头，否则没有这只有当它设置为 active 时才有效

Answer 1

这使用两个重叠的 div 来创建三 Angular 形和 this method在保持纵横比的同时使事物流畅。

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

我让它没有背景，所以你可以看到它是如何工作的。