# css画图形 #### 平行四边形 ~~~ .picture { width: 100px; height: 70px; background-color: gray; transform: skew(20deg); 这里可以用正负号控制扭曲方向 } ~~~ #### 菱形 ~~~ .picture { width: 100px; height: 100px; background-color: gray; transform: rotate(45deg); transform-origin: 0 100%; /* transform-origin定义元素变形的原点。 */ } ~~~ #### 梯形  ~~~ .picture { height: 0; width: 100px; border-bottom: 100px solid green; border-left: 60px solid transparent; 对应红色箭头 border-right: 60px solid transparent; } ~~~ #### 三角形 ~~~ .picture { height: 0; width: 0; border: 50px solid; 为三角形高 border-color: transparent transparent green transparent; } ~~~