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

<canvas>これは、HTML5とJQueryの要素を使用して実行できます。キャンバス要素を使用すると、他のすべての平行四辺形のテキストを使用して、平行四辺形を重ねて描画できます。

これには、各アイテムのクリックを平行四辺形の1つに収まるかどうかを判断して処理する必要があるという欠点がありますが、これを行う唯一の方法です。

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のサイズによって決定される値に置き換える必要があります。

また、平行四辺形を描画するメソッドを作成して、メニュー項目の追加をはるかに簡単にすることもできます。