Changing the Shape of Div using CSS or JQuery

Question

How to change the div shape using css or jquery like below?

I have some content inside the div. Eg. Lorem ipsum... But I want the shape like this using css. Any possible way?

#shape {
-moz-transform: skew(26deg, 0deg);
-webkit-transform: skew(26deg, 0deg);
-o-transform: skew(26deg, 0deg);
-ms-transform: skew(26deg, 0deg);
transform: skew(26deg, 0deg);
}

<div id="shape">Lorem ipsum...</div>

try to use transform:rotate() property or transform:skew() property of CSS — sagar, Oct 25 '19 at 18:39
Please check [this](https://html-css-js.com/css/generator/transform/) link to try css transforms. — Lal, Oct 25 '19 at 18:44
@Lal, I tried the same already. Unable to get the shape like above. I want left side towards right side is increasing height like triangle. Exactly same like the above pic. — Shakthi, Oct 25 '19 at 18:46
I have the reference here. http://jsfiddle.net/brentonstrine/349x9/2111/. But How to change it towards my requirement? — Shakthi, Oct 25 '19 at 18:50
@AdamBuchananSmith, The link which you provided, if we add some content, within the div, it shows like -90deg cclock wise. — Shakthi, Oct 25 '19 at 19:55

Shakthi · Answer 1 · 2019-10-25T20:04:48.093

0

I'm able to get the output. Thanks to all..

#shape {     
  margin-top: 50px;
  width: 150px;
  height: 100px;
  background-color: red;
  transform: perspective(100px) rotateY(320deg); 
}

<div id="shape">Lorem ipsum...</div>

edited Oct 25 '19 at 20:04

answered Oct 25 '19 at 18:54

Shakthi

826
3
15
33

Changing the Shape of Div using CSS or JQuery

1 Answers1