我试图在顶部网站上创建一个正方形的div并流入三角形,
方形部分不是那么难,并且工作正常,但三角形部分有点难.
盒子需要改变大小与屏幕尺寸,在广场我这样做通过使用宽度和高度％,但我不能使用边框属性中的％符号
我现在的代码
<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用于设置类：我这样做是因为我使用parralax库并且想要在某个高度上将“按钮”设置为“活动”
我希望有人可以帮我(也许还有其他人)解决这个问题
的jsfiddle
example
我的想法是,当在类menuItemActive上设置div时,它将有箭头,否则不是
仅当它设置为活动时才会这样
解决方法
这使用两个重叠的div来创建三角形和
this method以使事物流畅,同时保持纵横比.
.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;
}
我没有背景就离开了它,所以你可以看到它是如何工作的.
