html - 在 css 中倾斜正方形的垂直线？

Question

我的页面中有一些方形 div，我将它们用作按钮。如何在不旋转整个正方形的情况下使垂直线有点倾斜？

我想让一个正方形看起来像图 1(绿色)而不是图 2(红色)

这可以通过 css 实现还是应该使用图像？

html:
<div id="square"></div>

css:
 #square {
 width:50px;
 height:50px;
 display:block;
 background-color:red;
 overflow:hidden
 }

http://jsfiddle.net/gmrq1ac4/

Answer 1

使用 CSS3 变换:倾斜

#square {
    -ms-transform: skew(30deg); /* IE 9 */
    -webkit-transform: skew(30deg); /* Chrome, Safari, Opera */
    transform: skew(30deg); /* Standard syntax */
    transform-origin: bottom left; /* Prevent the bottom from shifting */
}

这是一个 example