比較簡單的菱形圖片： 效果如下

代碼部分：

.d1{

margin-left: 100px;

display: inline-block;

transform: rotate(45deg);

overflow: hidden;

}

.d1>img {

max-width:100% ;

max-height: 100%;

transform: rotate(-45deg) scale(1.42);

}

斜條紋背景原理有些類似 但步驟卻不同 ：

第一步：我們要實現如下效果：

CSS部分： ?我們至少要創建四條紋理 ?// ***這里的0指的上一段顏色的結束地方***

.d3 {

background: linear-gradient(#fb3 25%, #58a 0, #58a 50%, #fb3 0,#fb3 75%, #58a 0);

background-size: 100% 30px; //使用?background-size?調整大小

background-repeat: no-repeat; //為了看到效果，這里去掉了重復

}

第二步： 使用tansform旋轉背景，效果如下： ? ? ? ? ? ? ? ? ? ? ?再使用默認平鋪：

? ? ? ? ??

CSS 部分：

.d4 {

background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%, #fb3 0,#fb3 75%, #58a 0);

background-size: 40px 40px;

}

但是上面的方法僅僅是實現了 45度的斜條紋背景 當這種方法在60度的情況下會發生如下情況：

由于度數的改變，我們需要重新計算每一個重復色塊大小，但是大體上的思路已經清晰了，接下來就是下面的終極解決方案：

不管是60度 還是75度 或者其他指定的傾斜數值都能輕松搞定

??

60deg ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 75deg

.d5 {

background: repeating-linear-gradient(75deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

/*最終更簡便的方法 repeating-linear-gradient 平鋪線性漸變*/

}

原文：http://www.cnblogs.com/sunyaaa/p/6765321.html

總結

以上是生活随笔為你收集整理的css如何实现菱形背景图片,使用CSS 实现菱形图片，斜条纹背景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。