html - 一个应该是矩形或正方形，我们可以使用html5或任何其他网络技术方法使其看起来像菱形吗？

Question

A<div></div>应该是长方形或者正方形，我们可以使用html5或者任何其他的网络技术方法让它看起来像一个菱形吗？

我知道 html5 可以创建一条倾斜的线来书写文本甚至旋转它们。

Answer 1

你正在寻找这样的东西——用你的CSS

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

例如看这个小提琴 - http://jsfiddle.net/xtXRQ/

Answer 2

Div 既不是正方形，也不是矩形。它只是定义 HTML 文档中的一个部门或一个部分。您可以通过在其上放置 css 使其像矩形或正方形。

您可以使用 HTML5 Canvas 绘制菱形

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

Answer 3

是的。 您可以为此目的使用 RaphaelJS。

请参阅此 jsfiddle 进行演示：http: //jsfiddle.net/NQtU5/

RaphaelJS使用 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'
});

请注意，'paper' DIV 元素（将其视为画布）的样式如下：

#r_paper { 
    position: absolute;
    width:270px; height:270px;
    left: 100px; top:100px
}