html图片做成菱形,两种css实现菱形的方法以及拓展特效

提到用css实现菱形，在我看来有两种比较便利而且兼容性不错的方法，实现的方式也都不难，但是简单的方法其实也可以做出一些眼前一亮的特效，后面会为大家介绍，下面先来说说两种实现菱形的方式。

方法一：border法

利用 border 来实现2个三角形，将三角形叠在一起，实现一个类似的效果。这是一种不错的方案，兼容性也不错，现在做三角形或者菱形我也经常使用这种方式。我也不过多介绍了，附源码

效果如图

方法二：

CSS3 是经常被提起，但在桌面端又很少被用到的内容。今天这个方案应该也算是一种兼容解决方案吧。实现原理是这样的：

创建一个有 border 的四方形，用 CSS3 transform 作 45 度旋转，这里就不贴出这种实现方法的源码了。目前几乎所有现代浏览器都对transform属性有较好的支持，虽然有的浏览器可能对这个属性的渲染效率比较低，但是也可以正常的显示，唯独IE，又是这个坑，可以使用滤镜这个复杂的方式去hack，实现的css如下：

/* IE滤镜*/

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398,M22=0.7660444431189779)";

当然如果有条件的话，可以使用一些特别的js，使ie中的某些浏览器支持css3属性，有兴趣的童鞋可以去查查资料。

如果不考虑兼容ie，其实利用border做各种三角形、组合的图形都是非常方便的，如果使用好了可以做出一些比较特别的效果，下面就举一个我们官网中的栗子

下面的这一个小三角形就是通过border法实现的，红色范围内其实是两个遮罩层给挡住了，然后中间留出一小部分，使用两个小的div形成的三角形组合，使透明部分形成一个三角形，即做出了这样的效果，是不是很特别呢？