在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

是的，可以使用CSS！像这样：

#square{
  height: 50px;
  width: 50px;
  background: green;
  border: solid 5px black;
  -webkit-transform: skewX(-25deg); //also use -moz, etc for other vendors
}

希望有所帮助！

Answer 2

使用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

Answer 3

您需要在20 - 30度之间transform你的方形x部分。请参阅此example

输出窗口

代码

#square1 {
    width:50px;
    height:50px;
    display:inline-block;
    background-color:red;
    overflow:hidden;
    margin-top:20px;
    border:2px solid #000;
    margin-left:15px;
    clear:both;
}
#square {
    clear:both;
    border:2px solid #000;
    margin-left:20px;
    width:50px;
    height:50px;
    display:inline-block;
    background-color:lightgreen;
    overflow:hidden
    -ms-transform: skew(-30deg); /* IE 9 */
    -webkit-transform: skew(-30deg); /* Chrome, Safari, Opera */
    transform: skew(-30deg); /* Standard syntax */
}