CODEWITHSUNDEEP
htmlcss
TJR
TJR

Reputation: 6577

How to transform DIV-Container with CSS3

I try to transform my div container like the following picture.

css perspec

Left is a normal div container painted black. On the right is the container i want to have.

Do you know how to solve this in css3 ? i read something about the "Polygon" attribute in css3, but i also heard that this attribut was removed.

edit: when content is in the box it would be screchted - the box is like "falling in the back".

Upvotes: 0

Views: 600

Answers (2)

Viktor
Viktor

Reputation: 507

I found an article at css-tricks.com regarding this a while back. This may work:

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

Upvotes: 2

Clyde Lobo
Clyde Lobo

Reputation: 9174

    #trapezoid { 
 border-bottom: 100px solid black;
 border-left: 50px solid transparent; 
 border-right: 50px solid transparent; 
 height: 0; width: 100px; }

Check here for more shapes and tricks

Upvotes: 1

Related Questions