1

A<div></div>は長方形または正方形であるはずですが、html5 またはその他の Web テクノロジを使用して菱形のように見せることはできますか?

html5 は傾斜した線を作成してテキストを書いたり、回転させたりできることを知っています。

4

3 に答える 3

6

あなたはこのようなものを探しています-あなたのcssで

#rhombusDiv { 
 width: 150px; 
 height: 100px;
 -webkit-transform: skew(20deg);
 -moz-transform: skew(20deg); 
 -o-transform: skew(20deg);
  background: blue;
 }

たとえば、このフィドルを参照してください - http://jsfiddle.net/xtXRQ/

于 2012-06-11T18:06:03.243 に答える
1

Div は正方形でも長方形でもありません。HTML ドキュメントの部門またはセクションを定義するだけです。cssを入れることで、長方形や正方形にすることができます。

HTML5 Canvas を使用してひし形を描画できます

http://www.w3schools.com/html5/html5_canvas.asp

于 2012-06-11T18:05:43.387 に答える
0

はい。 この目的で RaphaelJS を使用できます。

デモについては、この jsfiddle を参照してください: http://jsfiddle.net/NQtU5/

RaphaelJSは、利用可能な VML / SVG に応じて、多かれ少なかれクロスブラウザーの互換性を保証する VML / SVG を使用します。この方法は IE および FF/Safari/Chrome で機能し、インターフェイスの柔軟性がいくらか得られます。

まず、r_paper という名前の絶対配置 DIV を作成します。

<div id="r_paper"></div>

RaphaelJS ライブラリにリンクし、JavaScript で次のようにします。

var paper = Raphael( "r_paper" );
paper.path(
    "m10,140 l125,-100 l125,100 l-125,100 l-125,-100"
).attr({
    'stroke-width': 5, fill: 'crimson'
});

ここに画像の説明を入力

「紙」の DIV 要素 (キャンバスと考えてください) は次のようにスタイル設定されていることに注意してください。

#r_paper { 
    position: absolute;
    width:270px; height:270px;
    left: 100px; top:100px
}
于 2012-06-11T18:28:50.437 に答える