in CSS

How To Create Different Shapes In CSS

Shapes 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 Square Border


.square-border{
     width:100px; 
     height:100px; 
     border:5px solid yellow; 
     background: #FFF;
}

CSS Parallelogram


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

CSS Parallelogram Right


.parallelogramRight{
     width:100px; 
     height:100px; 
     border:1px solid #000; 
     background:yellow;
     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);
     transform: rotate(-45deg);
     -webkit-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;
     background:green;
}

CSS Half Circle Right


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

CSS Half Circle Left


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

CSS Half Circle Bottom


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

CSS Circle


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

CSS Oval


.oval{
     height:45px;
     width:180px;
     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;
}

CSS Quarter Circle Top Right


.quarterCircleTopRight{
     width:100px; 
     height:100px; 
     border:1px solid #000; 
     background: orange;
     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;
}

CSS Quarter Circle Bottom Right


.quarterCircleBottomRight{
     width:100px; 
     height:100px; 
     border:1px solid #000; 
     background: orange;
     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;
}

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;
}

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;
}

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;
}

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;
}

CSS Shapes Generator

Learn how these are created by using the CSS Shapes Generator from Coveloping. CSS Shapes Generator

Subscribe To The Weekly Newsletter

Get weekly updates to your email