使用CSS 實現菱形圖片，斜條紋背景

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

代碼部分：

<div class="d1">
    <img src="img/5.jpg">
</div>



 .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 平鋪線性漸變*/
  }