Reputation: 1520
I have make a parallelogram with CSS3. With this code:
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
Now I have the right and left bevel. But i want only to the righ the bevel. How can i make that?
Thanks
Upvotes: 7
Views: 22378
Reputation: 7463
UPDATE:
Here is an example and the result code: jsFiddle.
<style type="text/css">
#trapezoid {
height: 0;
width: 100px;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
<div id="trapezoid"></div>
This will create a trapezoid.
Or this:
<style type="text/css">
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
</style>
<div id="parallelogram"></div>
This will create a parallelogram
Here is an article about creating all kinds of shapes with CSS only and a single HTML element. It's a very interesting way for creating every shape from a triangle to a star.
The Shapes of CSS
Upvotes: 14