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

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled30.png

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://i1114.photobucket.com/albums/k535/auroralight1/Untitled30-1.png

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

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