html - 从右到左线性渐变

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#