javascript - 使用 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>的元素来完成。通过使用 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 大小确定的值。

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