While I was crawling around the internet I found this useful post from the land of the web about using CSS3 to create some simple shapes. You can see the cheat sheet here.

I started using this cheat sheet to create some shapes for web pages. But the problem with using a cheat sheet is that you have to go back and type in the CSS each time, so I create this page to easily copy and paste the CSS so I can correct the shapes easily.

CSS Square

.square{
     width:100px;
     height:100px;
     border:1px solid #000;
     background:yellow;
}

CSS Parallelogram

.parallelogram{
     width:100px;
     height:100px;
     border:1px solid #000;
     background:yellow;
     transform: skew(20deg);
     -o-transform: skew(20deg);
     -moz-transform: skew(20deg);
     -webkit-transform: skew(20deg);
}

CSS Parallelogram Right

.parallelogramRight{
     width:100px;
     height:100px;
     border:1px solid #000;
     background:yellow;
     transform: skew(-20deg);
     -o-transform: skew(-20deg);
     -moz-transform: skew(-20deg);
     -webkit-transform: skew(-20deg);
}

CSS Diamond

.diamond{
     width:100px;
     height:100px;
     border:1px solid #000;
     background:yellow;
    margin:3px 0 0 30px;
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
     -webkit-transform-origin: 0 100%;
     -moz-transform-origin: 0 100%;
     -ms-transform-origin: 0 100%;
     -o-transform-origin: 0 100%;
     transform-origin: 0 100%;
}

CSS Rectangle

.rectangle{
     width:100px;
     height:60px;
     border:1px solid #000;
     background:yellow;
}

CSS Trapez

.trapez{
     width:100px;
     height:0;
     border-bottom:100px solid blue;
     border-left:60px solid transparent;
     border-right:60px solid transparent;
}

CSS Trapez 2

.trapez2{
     width:100px;
     height:0;
     border-top:100px solid blue;
     border-left:60px solid transparent;
     border-right:60px solid transparent;
}

CSS Trapez 3

.trapez3{
     width:0;
     height:100px;
     border-right:100px solid blue;
     border-top:60px solid transparent;
     border-bottom:60px solid transparent;
}

CSS Trapez 4

.trapez4{
     width:0;
     height:100px;
     border-left:100px solid blue;
     border-top:60px solid transparent;
     border-bottom:60px solid transparent;
}

CSS Triangle

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

CSS Triangle Right

.triangleRight{
     width:0;
     height:0;
     border-left:100px solid red;
     border-top:50px solid transparent;
     border-bottom:50px solid transparent;
}

CSS Triangle Down

.triangleDown{
     width:0;
     height:0;
     border-top:100px solid red;
     border-left:50px solid transparent;
     border-right:50px solid transparent;
}

CSS Triangle Left

.triangleLeft{
     width:0;
     height:0;
     border-right:100px solid red;
     border-top:50px solid transparent;
     border-bottom:50px solid transparent;
}

CSS Half Circle

.halfCircle{
     height:45px;
     width:90px;
     border-radius: 90px 90px 0 0;
     -moz-border-radius: 90px 90px 0 0;
     -webkit-border-radius: 90px 90px 0 0;
     background:green;
}

CSS Half Circle Right

.halfCircleRight{
     height:90px;
     width:45px;
     border-radius: 0 90px 90px 0;
     -moz-border-radius: 0 90px 90px 0;
     -webkit-border-radius:  0 90px 90px 0;
     background:green;
}

CSS Half Circle Left

.halfCircleLeft{
     height:90px;
     width:45px;
     border-radius: 90px 0 0 90px;
     -moz-border-radius: 90px 0 0 90px;
     -webkit-border-radius: 90px 0 0 90px;
     background:green;
}

CSS Half Circle Bottom

.halfCircleBottom{
     height:45px;
     width:90px;
     border-radius: 0 0 90px 90px;
     -moz-border-radius: 0 0 90px 90px;
     -webkit-border-radius: 0 0 90px 90px;
     background:green;
}

CSS Circle

.circle{
     height:45px;
     width:45px;
     border-radius: 45px;
     -moz-border-radius: 45px;
     -webkit-border-radius: 45px;
     background:green;
}

CSS Oval

.oval{
     height:45px;
     width:180px;
     border-radius: 90px / 45px;
     -moz-border-radius:90px / 45px;
     -webkit-border-radius: 90px / 45px;
     background:green;
}

CSS Quarter Circle Top Left

.quarterCircleTopLeft{
     width:100px;
     height:100px;
     border:1px solid #000;
     background: orange;
     border-radius: 90px 0 0 0;
     -moz-border-radius: 90px 0 0 0;
     -webkit-border-radius: 90px 0 0 0;
}

CSS Quarter Circle Top Right

.quarterCircleTopRight{
     width:100px;
     height:100px;
     border:1px solid #000;
     background: orange;
     border-radius: 0 90px 0 0;
     -moz-border-radius: 0 90px 0 0;
     -webkit-border-radius: 0 90px 0 0;
}

CSS Quarter Circle Bottom Left

.quarterCircleBottomLeft{
     width:100px;
     height:100px;
     border:1px solid #000;
     background: orange;
     border-radius: 0 0 90px 0;
     -moz-border-radius: 0 0 90px 0;
     -webkit-border-radius: 0 0 90px 0;
}

CSS Quarter Circle Bottom Right

.quarterCircleBottomRight{
     width:100px;
     height:100px;
     border:1px solid #000;
     background: orange;
     border-radius: 0 0 0 90px;
     -moz-border-radius: 0 0 0 90px;
     -webkit-border-radius: 0 0 0 90px;
}

CSS Chart Top

.chartTop{
     width:0;
     height:0;
     border-right:60px solid purple;
     border-top:60px solid transparent;
     border-left:60px solid purple;
     border-bottom:60px solid purple;
     border-radius: 60px;
     -moz-border-radius: 60px;
     -webkit-border-radius: 60px;
}

CSS Chart Right

.chartRight{
     width:0;
     height:0;
     border-right:60px solid transparent;
     border-top:60px solid purple;
     border-left:60px solid purple;
     border-bottom:60px solid purple;
     border-radius: 60px;
     -moz-border-radius: 60px;
     -webkit-border-radius: 60px;
}

CSS Chart Bottom

.chartBottom{
     width:0;
     height:0;
     border-right:60px solid purple;
     border-top:60px solid purple;
     border-left:60px solid purple;
     border-bottom:60px solid transparent;
     border-radius: 60px;
     -moz-border-radius: 60px;
     -webkit-border-radius: 60px;
}

CSS Chart Left

.chartLeft{
     width:0;
     height:0;
     border-right:60px solid purple;
     border-top:60px solid purple;
     border-left:60px solid transparent;
     border-bottom:60px solid purple;
     border-radius: 60px;
     -moz-border-radius: 60px;
     -webkit-border-radius: 60px;
}

CSS Triangle Top Left

.triangleTopLeft{
     width:0;
     height:0;
     border-right:50px solid transparent;
     border-top:50px solid red;
     border-left:50px solid red;
     border-bottom:50px solid transparent;
}

CSS Triangle Top Right

.triangleTopRight{
     width:0;
     height:0;
     border-right:50px solid red;
     border-top:50px solid red;
     border-left:50px solid transparent;
     border-bottom:50px solid transparent;
}

CSS Triangle Bottom Left

.triangleBottomLeft{
     width:0;
     height:0;
     border-right:50px solid transparent;
     border-top:50px solid transparent;
     border-left:50px solid red;
     border-bottom:50px solid red;
}

CSS Triangle Bottom Right

.triangleBottomRight{
     width:0;
     height:0;
     border-right:50px solid red;
     border-top:50px solid transparent;
     border-left:50px solid transparent;
     border-bottom:50px solid red;
}

CSS Bookmark Ribbon

.bookmarkRibbon{
     width:0;
     height:100px;
     border-right:50px solid blue;
     border-left:50px solid blue;
     border-bottom:30px solid transparent;
}