漸變幫助創建一個傾斜的div

Question

所以我一直在試圖用CSS來實現這一個形狀，但沒有好的解決方案。我需要這是一個圖像，因爲這個div可能調整大小，我希望它保持不變。我也試圖創建一個效果不佳的SVG，我曾經看到有些人使用漸變來製作圖形，但是我無法找到任何指導我朝着正確方向的好指南。任何幫助表示讚賞:)

Answer 1

我試圖做的是在CSS按照烏爾圖像。 http://jsfiddle.net/3zkme/-看看這是否有幫助。謝謝。

HTML

<div style="margin:30px"> 
    <div class="trapezoid"> 
    </div> 
</div> 

CSS

.trapezoid{ 
    top: 150px; 
    vertical-align: middle; 
    border-bottom: 120px solid red; 
    border-left: 200px solid transparent; 
    border-top-left-radius:0px; 
    height: 0; 
    width: 150px; 
    transform:rotate(270deg); 
-ms-transform:rotate(270deg); /* IE 9 */ 
-webkit-transform:rotate(270deg); /* Opera, Chrome, and Safari */ 
} 

/* ---------- */ 

.trapezoid { 
    position:relative; 
} 
.trapezoid:after { 
    content:' '; 
    left:-14px; 
    top:10px; 
    position:absolute; 
    background:red; 
    border-radius:0px 0 0 0; 
    width:164px; 
    height:40px; 
    display:block; 
} 

Answer 2

你不使用漸變對於這一點，你只需要使用一個僞元素一樣:after。

示例代碼：

#bookmark { 
    width: 50px; 
    height: 100px; 
    position: relative; 
    background: red; 
} 

#bookmark:after { 
    content: ""; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 0; 
    height: 0; 
    border-bottom: 35px solid #FFF; 
    border-right: 50px solid transparent; 
} 

Live JSFiddle

如果你想要的形狀與漸變填充，你可以做到這一點。只是add that to the CSS：

background: linear-gradient(to right, #ff0000 0%,#B00000 100%); 

Answer 3

使用帶有角度的梯度是不適合你的情況，因爲（已經指出的王中王在評論）隨着寬度的增加，坡度（或）的角色標百分比需要修改以保持形狀。這非常棘手，所以只有當形狀具有固定的尺寸時才能使用這種方法。

然而梯度仍可使用與to [side] [side]語法，因爲使用此語法定義的梯度可以適應在容器尺寸的變化。在這種方法中不使用僞元素。

$(document).ready(function() { 
 
    $('#increase').on('click', function() { 
 
    $('.gradient').css('width', '300px').css('height', '500px'); 
 
    }) 
 
})

div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 300px; 
 
    width: 100px; 
 
    margin: 10px; 
 
    color: beige; 
 
    transition: all 1s; 
 
} 
 
.gradient { 
 
    padding: 10px; 
 
    background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat; 
 
    background-size: 100% 100px, 100% 100%; 
 
    background-position: 0% 100%, 0% -100px; 
 
} 
 
/* Just for demo */ 
 

 
body { 
 
    background: -webkit-radial-gradient(50% 50%, circle, aliceblue, steelblue); 
 
    background: radial-gradient(circle at 50% 50%, aliceblue, steelblue); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="gradient">Some content</div> 
 

 
<br> 
 
<br> 
 
<button id="increase">Increase Width &amp; Height</button>

請注意，這是更好地確保文本不流入形狀的傾斜部分，因爲周圍環繞的文本以適應內的形狀不是直線前進。