How to tilt this trapezium to the left

Question

I would like to tilt this trapezium to left. I don't know the property to do this.

Here is my code:

* {
     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>

related: https://stackoverflow.com/a/52455695/8620333 – Temani Afif Apr 10 '21 at 08:12 — Temani Afif, Apr 10 '21 at 08:12

score 1 · Answer 1 · answered Apr 10 '21 at 07:25

An additional transform - rotate - will tilt to the left if you give it a negative value for the number of degrees.

The rotation will be about the mid point (transform-origin: 50% 50%) by default. If you want it to rotate about another point - which is probably what is meant by 'tilt' - then use for example transform-origin: 0% 100% which is what is shown in this snippet.

Obviously you can try different degree values and different origins to get the exact effect you want.

* {
     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>

How to tilt this trapezium to the left

1 Answers1