[英]CSS - Crisp boundaries for linear gradient
我使用線性漸變來生成具有梯形邊框的div的兩個部分。 我無法在兩種顏色之間獲得清晰的邊界,我得到一個非常狹窄的漸變區域 - 我已經能夠減少它,但我無法完全減少它。
這是我用過的代碼:
.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>
您的梯度的聲明產生的1%之間的台階#ffffff
和#197f88
。 改變這個
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>
在分隔樣式的集合中 ,您可以看到許多不同且清晰的分隔符樣式。 願它對你的方法有所幫助。
我創建了一個使用position relative / absolute和Before偽元素的解決方案。 這是:
//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)
檢查解決方案
謝謝,T04435
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.