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>要素を使用して行うことができます。キャンバス要素を使用することで、他のすべての平行四辺形にテキストを置いて、平行四辺形を上に描画できます。

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

HTML

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

jQueryのあなたは、このコードは、このJSFiddleで働いて見ることができます

$("#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); 

。

画面サイズに合わせてサイズを保持するには、ハードコードされた値を$("#menu") divのサイズで指定された値に置き換える必要があります。

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