CODEWITHSUNDEEP
htmlcssgradientlinear-gradients
Developer123
Developer123

Reputation: 25

CSS gradient to create two different color design

I am trying to create a specific shape with specific color to keep it as a background. I successfully created gradient color that I want but I am struggling with getting shape right.

Here is what I have done and what is am trying to achieve,

My Work :

enter image description here

Expectation :

enter image description here

Code : 

.grad {
  height: 400px;
  width: 900px;
  background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
<div class="grad"></div>

I am open to use any other method as long as it is only one 'div'. I don't want to use two different div which are causing many issues in responsive design. I tried using clip-path but that too did not help because of the nature of the design.

Any help would be appreciated.

Upvotes: 2

Views: 1414

Answers (2)

Temani Afif
Temani Afif

Reputation: 273979

Use multiple gradient then adjust dimension and position to obtain what you want:

.grad {
  height: 100px;
  width: 300px;
  background:
  linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0) 0 0/100% calc(100% - 10px) no-repeat,
  linear-gradient(110deg, #62e6a5 52%, transparent 0) 0 100%/100% 100% no-repeat;
}
<div class="grad"></div>

Upvotes: 2

Mario Rawady
Mario Rawady

Reputation: 871

Use pseudo-elements like :before and :after

.grad{
  position: relative;
  height:200px;
  width:450px;
  margin-bottom: 10px;
  background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}

.grad-new{
  position: relative;
  height:200px;
  width:450px;
  margin-bottom: 10px;
  overflow: hidden;
  background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}

.grad-new:before{
  content: '';
  position: absolute;
  width: 3%;
  height: 10px;
  bottom: 0;
  right: 55.6%;
  background: #62e6a5;
  transform: skew(-20deg);
}
.grad-new:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: 0;
  left: 44.4%;
  background: #fff;
  transform: skew(-20deg);
}
<div class="grad"></div>
<div class="grad-new"></div>

Upvotes: 0

Related Questions