2017-11-25 254 views
1

TLDR:我想實現這一目標爲可伸縮的解決方案: triangle with gradient and patternCSS旋轉取決於寬度/固定像素值

較長的解釋: 目標是有一個與一個梯度作爲背景旋轉的刻度。但問題是旋轉不能定義爲deg,因爲它根據瀏覽器寬度而變化。所以元素應該是100%寬度的瀏覽器,其左側的的固定高度爲,而右側的固定高度爲固定的較低高度。

基本上,這可以很容易地完成只有水平伸展的圖像背景。唯一的問題是,應該有也應該在同一地區被裁剪的圖案覆蓋,這應該重複和不舒展(你可以看到這些圖案由等於盒)

所以我的想法是:是是否可以旋轉特定目標像素的元素?

當前的例子:

.triangleClipper { 
    height: 100px; 
    overflow: hidden; 
} 

.designElement { 
    background: linear-gradient(to right, #03cc65, #fbfe02); 
    height: 100px; 
    width: 200%; 
    transform-origin: top left; 
    transform: rotate(-2deg); 
    margin-top: -60px; 
} 

https://jsfiddle.net/0egg320q/ 您調整瀏覽器時,看到右側邊緣的問題。所以在寬屏幕上,你會看到三角形的末端和小屏幕太高。目標是在每個瀏覽器大小的左右邊緣上保持相同的高度。

歡迎任何其他想法。

回答

1

您可以使用clip-path百分比。這樣你將永遠有你的固定高度,那麼你可能只需旋轉線性漸變,因爲你需要:

body { 
 
background:#ccc; 
 
} 
 

 
.triangleClipper { 
 
    height: 100px; 
 
    overflow: hidden; 
 
} 
 

 
.designElement { 
 
    background: linear-gradient(10deg, #03cc65, #fbfe02); 
 
    height: 100px; 
 
    width: 100%; 
 
    -webkit-clip-path: polygon(120% 0, 0 0, 0 100%); 
 
    clip-path: polygon(120% 0, 0 0, 0 100%); 
 
}
<div class="triangleClipper"> 
 
    <div class="designElement"></div> 
 
</div>

你只需要注意,因爲這財產是並非所有人都支持瀏覽器。使用

body { 
 
    background:#ccc; 
 
} 
 
.triangleClipper { 
 
    height: 100px; 
 
    overflow: hidden; 
 

 
} 
 

 
.designElement { 
 
    background: linear-gradient(10deg, #03cc65, #fbfe02); 
 
    height: 100%; 
 
    width: 100%; 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 
.designElement:after { 
 
    content: ""; 
 
    position: absolute; 
 
    border-right: 120vw solid #fff; 
 
    border-bottom: 100px solid #fff; 
 
    border-top: 100px solid transparent; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="triangleClipper"> 
 
    <div class="designElement"></div> 
 
</div>

UPDATE

另一種很好的解決方案:

使用僞元素另一種解決方案,但在這種情況下,你將有底部有色的和不透偏斜轉換和一些%屬性。這種解決方案不會使高度固定,但它會使兩個高度的比率爲固定。它也可能很有趣。

body { 
 
    background: #ccc; 
 
} 
 

 
.triangleClipper { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    padding-top: 30%; 
 
} 
 

 
.designElement { 
 
    background: linear-gradient(to right, #03cc65, #fbfe02); 
 
    padding-top: 100%; 
 
    margin-top: -120%; 
 
    width: 100%; 
 
    transform: skewY(-7deg); 
 
}
<div class="triangleClipper"> 
 
    <div class="designElement"></div> 
 
</div>

+0

剪輯路徑聽起來像理想的解決方案爲止。我以前沒有用過這個。謝謝。 我會搜索是否有辦法實現有問題的小孩Internet Explorer的剪輯路徑;-)(多年後IE仍然是問題^^) – terraloader

+0

@terraloader是的!但肯定在2/3年後IE肯定會死的,我們會呼吸:) –

+0

@terraloader我已經添加了一個新的解決方案,使用歪斜和沒有JS也可以intresting;)它兼容所有瀏覽器 –

0

尋找一個跨瀏覽器的方式對剪輯路徑(尤其是IE)之後,我發現,使用SVG是最好的解決辦法。

很遺憾,SVG不支持多邊形的百分比值,所以我只能通過添加JavaScript並根據瀏覽器大小更正值來修復此問題。 (在基本的SVG可用於縮放對象,JS是隻有用於校正圖案圖像的輸出。)

$(function() { 
 

 
    //svg der fensterbreite anpassen 
 
    var fullWidth = $('.styleElementTop').width(); 
 
    console.log(fullWidth); 
 
    $('.styleElementTop svg')[0].setAttribute('viewBox', '0 0 ' + fullWidth + ' 100'); 
 
    $('.styleElementTop #gradientFill')[0].setAttribute('points', '0,0 0,100 ' + fullWidth + ',10 ' + fullWidth + ',0'); 
 
    $('.styleElementTop #patternFill')[0].setAttribute('points', '0,0 0,100 ' + fullWidth + ',10 ' + fullWidth + ',0'); 
 
});
body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    } 
 
    
 
    .styleElementTop { 
 
    height: 100px; 
 
    width: 100%; 
 
    } 
 
    
 
    #gradientFill { 
 
    fill: url(#mainGradient); 
 
    } 
 
    
 
    #patternFill { 
 
    fill: url(#mainPattern); 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="styleElementTop"> 
 
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 100" preserveAspectRatio="none"> 
 
    <defs> 
 
     <linearGradient id="mainGradient"> 
 
     <stop stop-color="#03cc65" offset="0%" /> 
 
     <stop stop-color="#fbfe02" offset="100%" /> 
 
     </linearGradient> 
 
     <pattern id="mainPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse"> 
 
     <image width="10" height="10" xlink:href="https://live.tlprod.de/temp/whitepattern.png" /> 
 
     </pattern> 
 
    </defs> 
 
    <polygon id="gradientFill" points="0,0 0,100 700,10 700,0"></polygon> 
 
    <polygon id="patternFill" points="0,0 0,100 700,10 700,0"></polygon> 
 
    </svg> 
 
</div>

+0

我不知道JS是允許您的解決方案:)在這種情況下,我可以爲您提供解決方案使用旋轉,你可以動態地改變學位。 –

+0

..yeee JS不是最好的解決方案,但沒有它,我沒有找到任何跨瀏覽器解決方案。 根據寬度計算度數也是我的想法,但它需要深入理解數學^^ 但是可能會有幫助,並且可能會有更低的佔位面積。 – terraloader