整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
圖片裁切為菱形是一種常見的設計手法，那么怎么在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>思維新建站官網：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形成的三角形組合，使透明部分形成一個三角形，即做出了這樣的效果，是不是很特別呢？
這是一個純CSS實現的Loading特效，包括棱形鏈條的動畫效果。該特效可以被用于網站、應用程序等需要加載時的等待效果。
使用CSS3的@keyframes屬性實現動畫效果。通過調整不同幀的關鍵幀，可以實現不同的動畫效果。在這個Loading特效中，我們使用了transform屬性來旋轉棱形，以及animation-delay屬性來延遲動畫的開始時間，從而使得多個棱形可以錯開旋轉。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
