CODEWITHSUNDEEP
htmlcss
Rimil Dey
Rimil Dey

Reputation: 977

CSS - Crisp boundaries for linear gradient

I am using linear gradient to generate two sections of a div with a trapezium-like border. I am not able to get a crisp boundary between the two colors, I get a very narrow region of gradient - I have been able to reduce it, but I haven't been able to reduce it completely.

This is the code I have used:

.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>

Upvotes: 3

Views: 710

Answers (2)

RWAM
RWAM

Reputation: 7018

Your declaration of the gradient produces a step of 1% between #ffffffand #197f88. Change this from

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

to

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

and you get crisp boundaries (but the angle is rather suboptimal):

.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>

On A Collection of Separator Styles there you can see many different and sharp separator styles. May it's helpful for your approach.

Upvotes: 2

T04435
T04435

Reputation: 14022

I have created a solution which uses position relative/absolute and Before pseudo-element. Here it's:

//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)

Check the SOLUTION

THANKS, T04435

Upvotes: 0

Related Questions