創造百分比

我試圖創建一個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

回答

相關問題