整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
思維新建站官網：jz.inspinovation.com
文|魯掌柜
提到用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形成的三角形組合，使透明部分形成一個三角形，即做出了這樣的效果，是不是很特別呢？
作步驟
1、打開一篇具有原始數據的WPS工作表，在功能區選擇“插入”選項卡，單擊“形狀”圖標，在出現的下拉按鈕中選擇插入一個形狀，小編在這里插入“菱形”；
2、選中插入的“菱形”，然后單擊鼠標右鍵，在彈出的快捷菜單中選擇“設置對象格式”命令；
3、在“設置對象格式”的對話框中我們將填充顏色設置為“無填充顏色”然后單擊“確定”；
4、此時你會看到我們插入的圖形已經變成了透明色，然后我們選中整個表格，同時按住鍵盤上的“Ctrl+c"進行剪切；
5、然后把剪切的表格通過鍵盤上的“Ctrl+v”粘貼到我們的圖形里邊，然后選擇插入的圖形，單擊“效果設置”選項卡，選擇“三維效果”中的第二個效果樣式；
6、返回到工作表中就可以看到我們設置的三維效果的表框了；
提示：在把表格粘貼到我們的圖形的過程中的時候，有時候需要我們選中圖形進行調整，把它調到適合整個表格的最佳效果，另外我們還可以在“效果設置”選項卡中通過“顏色”選項組來進行圖形的顏色設置。
圖片裁切為菱形是一種常見的設計手法，那么怎么在CSS中實現呢？
把圖片用一個div包裹起來，然后rotate一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
display: flex;
justify-content: center;
align-content: center;
padding: 100px;
}
.picture{
width: 300px;
transform: rotate(45deg);
overflow: hidden;
border: 1px red solid;
}
.picture >img{
max-width: 100%;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="picture">
<img src="../img/cat.png" alt="">
</div>
</body>
</html>從上圖中我們可以看到，它并沒有一步到位地直接達到我們期望的效果，而是成了一個八角型。
max-width：100%，會被解析成.picture邊長。但是我們想讓圖片的寬度與容器的對角線相等，而不是與邊長相等。所以我們可以把max-width的邊長設置為√2x100% + 100% = 142%。但是這里用scale()把變形樣式放大會更合理，因為scale是以中心點進行縮放，而通過width是通過左上角為原點進行縮放。
.picture >img{
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
</style>
</head>
<body>
<img src="../img/cat.png" alt="">
</body>
</html>polygon() - 多邊形，它允許我們用一系列（以逗號分隔的）坐標點來指定任意的多邊形，我們甚至可以使用百分比值，它們會解析為元素自身的尺寸。
還可以做動畫：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
transition: 1s clip-path;
}
img:hover{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
</style>
</head>
<body>
<img src="../img/cat.png" alt="">
</body>
</html>*請認真填寫需求信息，我們會在24小時內與您取得聯系。
