向左

Question

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

線性漸變右上面的代碼將幫助我獲得了設計如下：

不過，我想使用相同的代碼，以使這樣的設計：

我怎麼可能用同樣的技術做到這一點？

Answer 1

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

這裏有一個筆：https://codepen.io/joseph-mueller/pen/jwdVyX?editors=1100#

Answer 2

這是你想要的嗎？

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

Answer 3

我複製你的代碼，並試圖去改變它。然後我可以得到答案。

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

請告訴我，如果這是你想要的。