CSS实现三角形和平行四边形

首先展示效果图：

三角形实现（border）:
当我们没有给元素设置宽高但却设置了border-width时:

从上面那张图片我们就可以了解三角形的形成原理了：

div{ width: 0; height: 0; border-width: 50px; border-style: solid; border-color: transparent transparent #333 transparent; margin-bottom: 30px; }

平行四边形实现（transform）：
只需要给元素添加 transform: skew( -30deg ) ；但是如果我们的DIV里面有内容的话就会发现内容也歪了，解决方法很简单，我们只要把内容嵌在一个单独的容器里面，再次进行transform: skew( 30deg ) 就可以了。