如何将此梯形向左倾斜

Question

我想把这个梯形向左倾斜。我不知道有什么属性可以做到这一点。

这是我的代码：

* {
     margin: 0;
     padding: 0;
     background-color: white; 
  }
    
  /* creating the trapezium shape*/
  .trapezium {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     height: 0;
     width: 150px;
     border-bottom: 150px solid yellow;
     border-left: 100px solid transparent;
     border-right: 100px solid transparent;
  }

 <div class="trapezium"></div> 

Answer 1

如果您将度数设为负值，则附加变换 - rotate - 将向左倾斜。

默认情况下，旋转将围绕中点 (transform-origin: 50% 50%)。如果您希望它围绕另一个点旋转——这可能是“倾斜”的意思——然后使用例如transform-origin: 0% 100%，这就是这个 sn-p 中显示的内容。

显然你可以尝试不同的度数和不同的起源来得到你想要的确切效果。

* {
     margin: 0;
     padding: 0;
     background-color: white; 
  }
    
  /* creating the trapezium shape*/
  .trapezium {
     position: absolute;
     top: 50%;
     left: 50%;
     transform-origin: 0% 100%;
     transform: translate(-50%, -50%) rotate(-15deg);
     height: 0;
     width: 150px;
     border-bottom: 150px solid yellow;
     border-left: 100px solid transparent;
     border-right: 100px solid transparent;
  }

<div class="trapezium"></div>