css-绘制平行四边形

xyc

    咱们继续之前说的css实现图形的效果方法，今天来说说平行四边形的实现方法。
    原理：使用transform使长方形倾斜一个角度。

   效果：
   
   HTML：
   

[HTML] 纯文本查看 复制代码

<div class="div"></div>

   css样式：
   

[CSS] 纯文本查看 复制代码

.div {
	    width: 120px;
	    height: 80px;
	    float: left;
	    margin-left: 10px;
	    -webkit-transform: skew(30deg);
	    -moz-transform: skew(230deg);
	    -o-transform: skew(30deg);
	    transform: skew(30deg);
	    background-color: #2eda01;
	   }

  以上就是平行四边形的实现效果，后面会继续给大家说说css实现其他图形的样式方法。希望大家多多关注！