CSS Parallelogram

Sammy12 · 01-30-2012, 04:16 AM

Hi I was wondering how I could make something like this in css. The user will be able to customize the color, border, and transparency so I'm looking to do this completely with css

anyone got any cool methods? My original idea was to use 2 css triangles for the ends, but that would take a lot of css :\

http://css-tricks.com/snippets/css/css-triangle/

any other ideas? before you go all -webkit-transform on me, I would like IE6 kind of support
http://css-tricks.com/examples/ShapesOfCSS/

nameno · 01-30-2012, 07:15 AM

try playing around with this:

<html>
<head>
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:skew(-10deg,-20deg);
-ms-transform:skew(-10deg,-10deg); /* IE 9 */
-moz-transform:skew(-10deg,-10deg); /* Firefox */
-webkit-transform:skew(-10deg,-10deg); /* Safari and Chrome */
-o-transform:skew(-10deg,-10deg); /* Opera */
}
</style>
</head>
<body>

<div>Hello. This is a DIV element.</div>
<br><br>
<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

Sammy12 · 01-30-2012, 11:12 PM

Quote:

Originally Posted by Sammy12

any other ideas? before you go all -webkit-transform on me, I would like IE6 kind of support
http://css-tricks.com/examples/ShapesOfCSS/

you literally googled that