使用JavaScript创建倾斜的Div和Object

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的<canvas>元素和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的大小确定的值。

您还需要创建一种绘制平行四边形图的方法，以便更加简单地添加其他菜单项。