用css实现三角形和平行四边形

我们经常在逛网页的时候，会看到一些三角形，比如下面这张图，个人中心后面有个三角形，那么我们如何利用css样式来绘制出这个三角形呢？

三角形案例

刚刚开始学习css，我们可以用border来实现。

借助border的粗细、样式、颜色三个属性来绘出三角形，那又是怎样才能得到这个三角形呢？我们来看看下面这三张图片：

三角形的由来

看了这三个图形，我们大概能明白了三角形是怎样产生的了。第一个图形我们设置了宽width高height，然后又设置了边框border，给border的四边设置了同样粗细、实线、不同的颜色，在这个图形中，我们看到了梯形，没错，梯形也可以这样做出来，如果只需要显示一个梯形，我们只需将其他三边的border颜色设置为透明色transparent就可以了。再来看第二个图形，是由四个小三角形组成的，我们可以认为一开始这个元素宽高都为0，这样我们再给它设置边框粗细、样式、颜色，就会得到这个图片了，显然，第三个图片是在第二个图片的基础上将其它三个边框的颜色设置为透明色，这样就会得到一个三角形的效果了。代码如下：

 参考代码

利用此方法我们来实现下面平行四边形吧！

平行四边形

首先我们按照上面介绍的方法写出两个三角形，分别将border-top和border-bottom设置可见颜色，接下来我们需要给大得div设置为绝对定位position：relative；然后再给里面的div设置相对定位(相对于它本身原始位置的定位)，利用开发人员工具调试得到最优的top和left数值，代码如下

平行四边形设计

对于学习的这些内容，我们可以自己写出一个七巧板了

七巧板

赶紧动动手吧在接下来的学习中，我们将还会利用新学的方法来绘制这些图形，继续关注哦！