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

標籤：eating   ota   src   bsp   接下來   解決   傾斜   塊大小   旋轉   

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

代碼部分：

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

　　

　　

 

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