How to transform skew only towards bottom corners?

Question

I'm confused about how can I transform the corners in one side (top or bottom) only something like below:

Normal:

Transformed:

Can anyone please help me on this? Here, the top corners stay same and the bottom corners are transformed. How can I achieve this?

Manjuboyz · Accepted Answer · 2020-03-26T05:48:11.547

3

You can start with something like this, clean and simple without multiple divs.

#trapezium {
  width: 200px;
  height: 100px;
  margin: 50px;
  transform: perspective(100px) rotateX(-45deg);
  background-color: gray;
}

<div id='trapezium'></div>

edited Mar 26 '20 at 05:48

answered Mar 26 '20 at 05:12

Manjuboyz

6,978
3
21
43

This has one corner. I need two corners (bottom left, bottom right). – gacat Mar 26 '20 at 05:13
Check now! I have updated my code. – Manjuboyz Mar 26 '20 at 05:14
I need transformation. – gacat Mar 26 '20 at 05:15
You mean the design should be flipover? the small sides should be at bottom? – Manjuboyz Mar 26 '20 at 05:17
Yes, but with transform trick. (What you have shown in demo is correct but I need same effect with transform css) – gacat Mar 26 '20 at 05:22
sorry it took time to understand the requirement! let me know now. – Manjuboyz Mar 26 '20 at 05:37

ROOT · Answer 2 · 2020-03-26T05:28:48.887

1

you can have similar output using perspective and transform: rotateX(-45deg); CSS attribute, here is a working snippet:

.scene {
  position: relative;
  left:100px;
  width: 200px;
  height: 200px;
  
  margin: 40px;
  /* perspective property */
  perspective: 400px;
}

.panel {
  width: 100%;
  height: 100%;
  background: blue;
  transform:  rotateX(-45deg);
}

<div class="scene">
  <div class="panel"></div>
</div>

edited Mar 26 '20 at 05:28

answered Mar 26 '20 at 05:25

ROOT

11,363
5
30
45

This is what I'm looking for. But what do you mean by transformY? Ah, it can't be done to just one div? – gacat Mar 26 '20 at 05:27
sorry I meant `rotateX()` will update my answer. – ROOT Mar 26 '20 at 05:28

How to transform skew only towards bottom corners?

2 Answers2