这是一个线性渐变,它在 div 的右上角和左下角创建三 Angular 形,但是,我无法弄清楚如何仅制作右上角,即删除左下角。有人可以帮忙吗?
这是代码笔
http://codepen.io/pete3795/pen/LZVLZK
background: linear-gradient(45deg, rgba(237,165,9,1) 0%, rgba(237,165,9,1) 5%, rgba(231,229,219,1) 5%, rgba(231,229,219,1) 10%, rgba(240,239,235,1) 10%, rgba(240,239,235,1) 90%, rgba(231,229,219,1) 90%, rgba(231,229,219,1) 95%, rgba(237,165,9,1) 95%, rgba(237,165,9,1) 100%);
最佳答案
去掉 0% 到 5% 和 5% 到 10% 的那个
基本上,您必须想象一个页面,该页面由一系列线分隔,旋转 45 度。
因此,从页面的 0% 到 5%(左下),它是橙色的 - rgba(237,165,9,1) 0%,rgba(237,165,9,1) 5%
从 5% 到 10% - 灰色:rgba(231,229,219,1) 5%,rgba(231,229,219,1) 10%,
从 10% 到 90% - 浅灰色:rgba(240,239,235,1) 10%,rgba(240,239,235,1) 90%,
从 90% 到 95% - 灰色:rgba(231,229,219,1) 90%,rgba(231,229,219,1) 95%,
最后从 95% 到 100% - 橙色:rgba(237,165,9,1) 95%,rgba(237,165,9,1) 100%
.test {
min-height: 17rem;
background: linear-gradient(45deg, rgba(240, 239, 235, 1) 10%, rgba(240, 239, 235, 1) 90%, rgba(231, 229, 219, 1) 90%, rgba(231, 229, 219, 1) 95%, rgba(237, 165, 9, 1) 95%, rgba(237, 165, 9, 1) 100%);
<div class="test">
</div>
或者正如 GCyrillus 指出的那样 - 如果您希望将 Angular 放在 css 的开头而不是末尾,您可以执行以下操作:
.test {
min-height: 17rem;
background: linear-gradient(-135deg, rgba(237, 165, 9, 1) 0%, rgba(237, 165, 9, 1) 5%, rgba(231, 229, 219, 1) 5%, rgba(231, 229, 219, 1) 10%, rgba(240, 239, 235, 1) 10%, rgba(240, 239, 235, 1) 100%);
}
<div class="test">
</div>
关于CSS3 线性渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37620892/