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

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email