使用JavaScript創建傾斜的div和對象

Question

是否可以使用JavaScript創建這樣的「傾斜菜單」（請參見下文）？

但我希望它們是「相對」的，以適當調整屏幕大小。

Answer 1

您可以使用CSS變換做到這一點，並與其他黑客..

div 
{ 

    transform:rotate(45deg); 
    -ms-transform:rotate(45deg); /* IE 9 */ 
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5); /* IE 8- */ 
    -moz-transform:rotate(45deg); /* Firefox */ 
    -moz-transform:skewx(45deg) translatex(150px); 
    -webkit-transform:rotate(45deg); /* Safari and Chrome */ 
    -o-transform:rotate(45deg); /* Opera */ 

} 

Answer 2

這可以使用HTML5和JQuery的<canvas>元件來完成。通過使用畫布元素，可以在每個其他平行四邊形中使用文本繪製平行四邊形圖像。

這確實有缺點，需要通過確定它是否落在一個平行四邊形內來處理每個項目的點擊，但這是我知道這樣做的唯一方法。

HTML

<div id="click" width=10%> 
Click Here 
</div> 
<div id="menu" width=10%> 
    <canvas id="canvas"></canvas> 
</div> 

JQuery的

$("#menu").hide(); 
$("#click").click(function(){ 
        $("#menu").slideToggle('slow', function() {}); 
        }); 

$("#canvas").click(function() { 
        // Determine which trapezoid the click was on and do the needed action. 
        }); 

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
// Draw the top parallelogram with the color blue. 
ctx.fillStyle = "blue"; 
ctx.beginPath(); 
ctx.moveTo(0,0); 
ctx.lineTo(75,0); 
ctx.lineTo(100,75); 
ctx.lineTo(25,75); 
ctx.lineTo(0,0); 
ctx.fill(); 

// Use a point object here to make it a bit easier to determine the four points. 
var startPoint = new Object(); 
startPoint.x = 25; 
startPoint.y = 75; 
// Draw the second parallelogram and fill it with grey. 
ctx.fillStyle = "grey"; 
ctx.beginPath(); 
ctx.moveTo(startPoint.x, startPoint.y); 
ctx.lineTo(startPoint.x + 75, startPoint.y); 
ctx.lineTo(startPoint.x + 85, startPoint.y + 25); 
ctx.lineTo(startPoint.x + 10, startPoint.y+25); 
ctx.lineTo(startPoint.x, startPoint.y); 
ctx.fill(); 

ctx.fillStyle = "black"; 
ctx.font = 'italic 22px sans-serif'; 
ctx.fillText("a", startPoint.x+10, startPoint.y+22); 

你可以看到這個代碼在這個JSFiddle工作。

要保持尺寸與屏幕尺寸相關，您需要用由$("#menu") div尺寸確定的值替換硬編碼值。

您還需要創建一種繪製平行四邊形的方法，以使添加其他菜單項變得更加簡單。