Paulund

via Ad Packs
in CSS by Paul // August 15

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

Paul

Paulund is a website dedicated to writing tutorials and code snippets about Web Development, the main subjects are PHP, Wordpress, jQuery, CSS3 and HTML5.

Website: http://www.paulund.co.uk

Share The Wealth

Also see

Feedback

Anything to add?

Discuss On Facebook

  • http://biz.leoraw.com/ Leora Wenger

    This is a great list, Paul. I can see the triangle right and the circle coming in handy.

    Love heart on the linked post. Will have to experiment. Not sure what one would do with the Pacman like shape. ;-)

    • Paul

      Thanks Leora

      Yea I’m not sure what you would use it for either just nice to know you can do it if you want to.

  • http://xigeek.com geek

    i fall in love with css3.

    i hope you can make css3 animation tutorial :)

    • Paul

      Yea it can do some pretty cool stuff.

      I can do a CSS animation tutorial if you want, I’ll add it to my list.

  • Pingback: How To Create Different Shapes In CSS | Design News

  • Pingback: Create Different Shapes In CSS | webtrendset

  • Pingback: How To Create Different Shapes In CSS : Lake of Web

  • Artsyguy1954

    THIS IS AN AWESOME LIST. THANK YOU FOR SHARING, PAUL

    • http://www.paulund.co.uk Paul

      Your welcome hope it becomes helpful.

  • Jennsie

    Thanks for visiting my website. Extensive list of CSS shapes. :)

    http://www.jenikya.com/blog