css3组件之几何图形

一、平行四边形

1、实心无边框

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

2、实心有边框

3、空心有边框

二、梯形

1、实心无边框

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height:;
    width: 100px;
}

2、实心有边框

3、空心有边框