线性渐变从右到左

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(-140deg, transparent 40px,  #dcaa1a 40px);
    padding-left: 56.5691px;
}

请告诉我这是否是你想要的。

Answer 3

这是你想要的吗？

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