创造百分比

我试图创建一个div是在顶位方和流入三角形CSS三角形，创造百分比

广场部分不那么辛苦，工作正常，但三角形的部分是有点困难。该框需要改变大小与屏幕尺寸，在我通过在宽度和高度使用％做了这个广场，但我不能在边框属性中使用％符号

我在这一刻的代码

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用于设置类：我这样做是因为我使用的是parralax李brary并希望设置按钮上的“活跃”在一定的高度

我希望有人能帮助我（也许还有其他人）这个问题

的jsfiddle example 我的想法是，当DIV设置阶级menuItemActive，这将有箭头，否则不这是只有当它被设置在主动

来源

2013-03-26 Edo Post

你能提供代码样品通过jsFiddle？ – 2013-03-26 15:10:47

完成，我在问题正文 – 2013-03-26 15:17:23

编辑，你也可以检查这个答案为一个响应三角形：http://stackoverflow.com/a/24808936/1811992 – 2014-11-24 08:19:45

我找到了解决办法通过使用JavaScript而不是百分比， Fiddle 我希望这能帮助其他一些人也

我使用的Java脚本是这样的：

$(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())); 
}

来源

2013-03-28 08:12:44

为了将来的参考，我做了一个版本，调整窗口的变化+一些CSS的东西。 http://codepen.io/clouddueling/pen/zlsaJ?editors=110 – 2014-04-04 21:59:38

它能够更好地使用自定义形状像这样的背景图像，它会更容易管理，你可以让它可以轻松调节自己的不同分辨率

来源

2013-03-26 17:55:18 ManZzup

如果我使用图像（女巫我在开始时），那么它在更大的屏幕上伸展出来并变得丑陋。 – 2013-03-26 18:00:38

这是为了什么确切的目的？一个按钮？你用pixxelting的问题是，使用一个小的原始图像使用一个约256 * 256的PNG，然后使用代码使得更小所以假设这是一个按钮，即使在最高分辨率，它将会良好的形状 – ManZzup 2013-03-26 18:04:46

它用于菜单按钮，我不确定按钮图像的大小是否是屏幕上请求的大小，我会查看这个明天。（当我在我的电脑再次出现） – 2013-03-26 18:07:46

这使用两个重叠的div创建三角形并使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; 
}

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

来源

2013-03-26 19:08:36 apaul

我试图使箭头流畅，以及但由于边界与不能设置precentage，我不得不解决这个问题与JavaScript，我用你的小提琴作为一个基地，并创造了这个，[JSFiddle]（http://jsfiddle.net/bLW5Z/1/） – 2013-03-27 08:10:14

试试这个 - http://jsfiddle.net/apaul34208/SpSdR/2/ – apaul 2013-03-27 14:02:01

谢谢你的努力，但我你的小提琴不是我期待的结果。我已经把它粘贴在第一个命令中了。 @ apaul34208我希望你为你付出努力 – 2013-03-27 15:34:26

你可以在CSS中做三角形。

这里是一篇文章的链接，概述了一般技术：http://css-tricks.com/snippets/css/css-triangle/。对于我找到和使用的稍微不同的情况，还有各种类似/其他方法，只需搜索“css三角形”即可。要简要描述该技术：它在元素上使用四个边界（如果您需要向下箭头，则将此元素放入您的<div id="overV12">中，或根据效果，将其应用于内部<div>）。有些是透明的，有些则不是。通过改变边框宽度和颜色，您可以生成CSS三角形，这些三角形可以完全自定义以形成不同的角度，长度等。我还看到这个概念用于创建仅限CSS的泡泡以及工具提示手柄。我已经广泛使用这种技术，并在我的使用情况下，它在每个浏览器（尽管我确实记得有一个项目与IE6有问题）工作。

来源

2013-03-26 20:33:39 Sean

回答

相关问题