兩種css實現菱形的方法以及拓展特效

思維新建站官網：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工作表，在功能區選擇“插入”選項卡，單擊“形狀”圖標，在出現的下拉按鈕中選擇插入一個形狀，小編在這里插入“菱形”；

軟件版本：
軟件大小：
軟件授權：
適用平臺：VistaWin7
下載http://dl.pconline.com.cn/download/1602.html

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>

在線咨詢

上一篇：“如何用JavaScript發送HTTP請求？”
下一篇：Excel VBA 如何將表格發布成網頁，這個功能的確強大

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

兩種css實現菱形的方法以及拓展特效

基于變形的方案

剪裁路徑方案

您的項目需求