CODEWITHSUNDEEP
htmlcss
CloudSeph
CloudSeph

Reputation: 883

Linear gradient right to left

.myStyle{
border: 0;
  height: 40px;
  background: linear-gradient(45deg, transparent 40px, pink 40px);
  padding-left: 56.5691px; /* 40 × √2 ≈ 56.5691 */
}

The code above will help me get a design as below:

enter image description here

However, I want to use the same code to make a design like this:

enter image description here

How is it possible for me to do so using the same technique?

Upvotes: 0

Views: 1153

Answers (3)

Buwaneka Sudheera
Buwaneka Sudheera

Reputation: 1417

I copied your code and tried to change it. Then I could get an answer.

.myStyle{
    border: 0;
    height: 40px;
    background: linear-gradient(-140deg, transparent 40px,  #dcaa1a 40px);
    padding-left: 56.5691px;
}

Please tell me if this is what you wanted.

Upvotes: 1

Joseph Mueller
Joseph Mueller

Reputation: 96

border: 0;
height: 40px;
background: linear-gradient(-135deg, transparent 40px, #e8aa36 40px);
padding-left: 56.5691px; /* 40 × √2 ≈ 56.5691 */

Here's a pen: https://codepen.io/joseph-mueller/pen/jwdVyX?editors=1100#

Upvotes: 3

JAGAT DAS
JAGAT DAS

Reputation: 29

Is this what you want ?

    .myStyle{
       border: 0;
       height: 40px;
       background: linear-gradient(-45deg, transparent 40px, pink 40px);
      padding-left: 56.5691px; /* 40 × √2 ≈ 56.5691 */
 }

Upvotes: 0

Related Questions