菱形：

display: inline-block;width:100px;height:100px;background-color: #c685d9;transform: rotate(45deg);margin:50px;

三角形：

width: 0;height:0;border-bottom: 100px solid #ffcccc;border-right:50px solid transparent;border-left:50px solid transparent;

梯形：

margin-top:50px;height: 0;width: 120px;border-bottom: 120px solid #cccccc;border-left: 60px solid transparent;border-right: 60px solid transparent;

平行四邊形：

margin-top:50px;margin-left:50px;width:160px;height:100px;background-color: beige;transform: skew(-30deg);

總結

以上是生活随笔為你收集整理的纯css画菱形，三角形，梯形，平行四边形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。