提到用css實(shí)現(xiàn)菱形，在我看來有兩種比較便利而且兼容性不錯(cuò)的方法，實(shí)現(xiàn)的方式也都不難，但是簡(jiǎn)單的方法其實(shí)也可以做出一些眼前一亮的特效，后面會(huì)為大家介紹，下面先來說說兩種實(shí)現(xiàn)菱形的方式。

方法一：border法

利用 border 來實(shí)現(xiàn)2個(gè)三角形，將三角形疊在一起，實(shí)現(xiàn)一個(gè)類似的效果。這是一種不錯(cuò)的方案，兼容性也不錯(cuò)，現(xiàn)在做三角形或者菱形我也經(jīng)常使用這種方式。我也不過多介紹了，附源碼

效果如圖

方法二：

CSS3 是經(jīng)常被提起，但在桌面端又很少被用到的內(nèi)容。今天這個(gè)方案應(yīng)該也算是一種兼容解決方案吧。實(shí)現(xiàn)原理是這樣的：

創(chuàng)建一個(gè)有 border 的四方形，用 CSS3 transform 作 45 度旋轉(zhuǎn)，這里就不貼出這種實(shí)現(xiàn)方法的源碼了。目前幾乎所有現(xiàn)代瀏覽器都對(duì)transform屬性有較好的支持，雖然有的瀏覽器可能對(duì)這個(gè)屬性的渲染效率比較低，但是也可以正常的顯示，唯獨(dú)IE，又是這個(gè)坑，可以使用濾鏡這個(gè)復(fù)雜的方式去hack，實(shí)現(xiàn)的css如下：

/* IE濾鏡*/

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

當(dāng)然如果有條件的話，可以使用一些特別的js，使ie中的某些瀏覽器支持css3屬性，有興趣的童鞋可以去查查資料。

如果不考慮兼容ie，其實(shí)利用border做各種三角形、組合的圖形都是非常方便的，如果使用好了可以做出一些比較特別的效果，下面就舉一個(gè)我們官網(wǎng)中的栗子

下面的這一個(gè)小三角形就是通過border法實(shí)現(xiàn)的，紅色范圍內(nèi)其實(shí)是兩個(gè)遮罩層給擋住了，然后中間留出一小部分，使用兩個(gè)小的div形成的三角形組合，使透明部分形成一個(gè)三角形，即做出了這樣的效果，是不是很特別呢？

總結(jié)

以上是生活随笔為你收集整理的html图片做成菱形,两种css实现菱形的方法以及拓展特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。