CSS - 用於線性漸變的清晰邊界

我正在使用線性漸變生成具有梯形邊界的div的兩個部分。我無法在兩種顏色之間獲得清晰的邊界，我得到了一個非常狹窄的漸變區域 - 我已經能夠減少它，但是我無法完全減少它。CSS - 用於線性漸變的清晰邊界

這是我使用的代碼：

.buyers-div { 
 
    width: 100%; 
 
    height: 500px; 
 
    background: -moz-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* ff3.6+ */ 
 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #FFFFFF), color-stop(49%, #FFFFFF), color-stop(50%, #197f88), color-stop(100%, #197f88)); 
 
    /* safari4+,chrome */ 
 
    background: -webkit-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* safari5.1+,chrome10+ */ 
 
    background: -o-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* opera 11.10+ */ 
 
    background: -ms-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* ie10+ */ 
 
    background: linear-gradient(113deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* w3c */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#197f88', GradientType=1); 
 
    /* ie6-9 */ 
 
}

<div class="buyers-div"></div>

來源

2017-05-17 Rimil Dey

你梯度的聲明產生的1％#ffffff和之間的一個步驟。從

background: linear-gradient(113deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);

更改爲

background: linear-gradient(113deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);

，你會得到清晰的邊界（但角度而次優）：

.buyers-div { 
 
    width: 100%; 
 
    height: 500px; 
 
    background: -moz-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* ff3.6+ */ 
 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #FFFFFF), color-stop(50%, #FFFFFF), color-stop(50%, #197f88), color-stop(100%, #197f88)); 
 
    /* safari4+,chrome */ 
 
    background: -webkit-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* safari5.1+,chrome10+ */ 
 
    background: -o-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* opera 11.10+ */ 
 
    background: -ms-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* ie10+ */ 
 
    background: linear-gradient(113deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* w3c */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#197f88', GradientType=1); 
 
    /* ie6-9 */ 
 
}

<div class="buyers-div"></div>

在A Collection of Separator Styles那裏你可以看到很多不同的d清晰的分隔符樣式。可能對你的方法有幫助。

來源

2017-05-17 12:34:19 RWAM

你是對的，但在Google Chrome瀏覽器中問題仍然存在。例如，這個小提琴在Google Chrome上只有問題：[link]（https://jsfiddle.net/rk5jgvpt/） – webpaul

我已經創建，它使用相對/絕對和僞元件之前的位置的解決方案。這就是：

//HMTL(PUG) 
.buyers-div 

CSS(SASS) 
.buyers-div 
    position:relative 
    width: 100% 
    height: 500px 
    background-color: #197f88 
    overflow: hidden 
    &:before 
    content: '' 
    position: absolute 
    width: 100% 
    height: 500px 
    background-color: white 
    left: -50% 
    transform: skew(-45deg)

檢查SOLUTION

感謝，T04435

來源

2017-05-17 12:13:38 T04435

這並不真的看起來很cri .. .. – Roberrrt

@Roberrrt你看看原始和比較嗎？它看起來很脆。 – T04435

CSS - 用於線性漸變的清晰邊界

回答

相關問題