CSS：在標記了背景圖像和％

Question

所以我有下面的代碼，它在div的頂部放置了一個傾斜的白色邊框（我有一個後面的標籤在底部彈出另一個） - 我的問題是使這個反應迅速 - 當我將窗戶縮小時，圖像看起來並沒有保留在左上和左下，它們向下和向上移動了一大塊彩色塊頂部和底部，我試圖隱藏並在該過程中看起來偏斜。 ..

.fixed-width-container { 
    width:60%; 
    margin:0px auto; 
    float:left; 
    .slant { 

    position: relative; 
     &:before { 
      content:""; 
      position: absolute; 
      top:0; 
      left:0; 
      width:100%; 
      height:94px; 
      background-image: url('images/angle.png'); 
      background-repeat: no-repeat; 
      background-position: top left; 
      background-size:100%; 
      z-index: 0; 
      display: block; 
      -ms-transform: rotate(180deg); /* IE 9 */ 
      -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ 
      transform: rotate(180deg);    
     }    
    } 
} 

任何想法如何讓他們留下來？ ％高度不會做的工作要麼...

乾杯:)

Answer 1

改變了我的代碼進行到底！代替使用圖像，我使用白色塊並旋轉它：

.slant { 
position: relative; 
&:after { 
    display: block; 
    content: ""; 
    color: transparent; 
    width: 100%; 
    height: 100px; 
    background: #ffffff; 
    position: absolute; 
    left: -10px; 
    bottom: -50px; 
    -webkit-transform: rotate(-4deg); 
    -moz-transform: rotate(-4deg); 
} 
&:before { 
    display: block; 
    content: ""; 
    color: transparent; 
    width: 100%; 
    height: 100px; 
    background: #ffffff; 
    position: absolute; 
    left: -10px; 
    top: -50px; 
    -webkit-transform: rotate(-4deg); 
    -moz-transform: rotate(-4deg); 
} 
}