Paulund
2011-08-15 #css-examples #css

How To Create Different Shapes In CSS

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

<div style="width:100px; height:100px; border:5px solid yellow; background: #FFF;"></div>

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

## CSS Parallelogram

<div style="width:100px; height:100px; border:1px solid #000; background:yellow; transform: skew(20deg); -webkit-transform: skew(20deg);"></div>

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

## CSS Parallelogram Right

<div style="width:100px; height:100px; border:1px solid #000; background:yellow; transform: skew(-20deg); -webkit-transform: skew(-20deg);"></div>

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

## CSS Diamond



<div style="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%; position:relative; top:10px; left:30px;"></div>

.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

<div style="width:100px; height:60px; border:1px solid #000; background:yellow;"></div>

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

## CSS Trapez

<div style="width:100px; height:0; border-bottom:100px solid blue; border-left:60px solid transparent; border-right:60px solid transparent;"></div>

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

## CSS Trapez 2

<div style="width:100px; height:0; border-top:100px solid blue; border-left:60px solid transparent; border-right:60px solid transparent;"></div>

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

## CSS Trapez 3

<div style="width:0; height:100px; border-right:100px solid blue; border-top:60px solid transparent; border-bottom:60px solid transparent;"></div>

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

## CSS Trapez 4

<div style="width:0; height:100px; border-left:100px solid blue; border-top:60px solid transparent; border-bottom:60px solid transparent;"></div>

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

## CSS Triangle

<div style="width:0; height:0; border-bottom:100px solid red; border-left:50px solid transparent; border-right:50px solid transparent;"></div>

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

## CSS Triangle Right

<div style="width:0; height:0; border-left:100px solid red; border-top:50px solid transparent; border-bottom:50px solid transparent;"></div>

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

## CSS Triangle Down

<div style="width:0; height:0; border-top:100px solid red; border-left:50px solid transparent; border-right:50px solid transparent;"></div>

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

## CSS Triangle Left

<div style="width:0; height:0; border-right:100px solid red; border-top:50px solid transparent; border-bottom:50px solid transparent;"></div>

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

## CSS Half Circle

<div style="height:45px; width:90px;border-radius: 90px 90px 0 0;background:green;"></div>

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

## CSS Half Circle Right

<div style="height:90px; width:45px; border-radius: 0 90px 90px 0; background:green;"></div>

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

## CSS Half Circle Left

<div style="height:90px; width:45px; border-radius: 90px 0 0 90px; background:green;"></div>

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

## CSS Half Circle Bottom

<div style="height:45px; width:90px; border-radius: 0 0 90px 90px; background:green;"></div>

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

## CSS Circle

<div style="height:45px; width:45px;border-radius: 45px; background:green;"></div>

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

## CSS Oval

<div style="height:45px; width:180px;border-radius: 90px / 45px; background:green;"></div>

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

## CSS Quarter Circle Top Left

<div style="width:100px; height:100px; border:1px solid #000; background: orange; border-radius: 90px 0 0 0;"></div>

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

## CSS Quarter Circle Top Right

<div style="width:100px; height:100px; border:1px solid #000; background: orange; border-radius: 0 90px 0 0;"></div>

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

## CSS Quarter Circle Bottom Left

<div style="width:100px; height:100px; border:1px solid #000; background: orange; border-radius: 0 0 90px 0;"></div>

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

## CSS Quarter Circle Bottom Right

<div style="width:100px; height:100px; border:1px solid #000; background: orange; border-radius: 0 0 0 90px;"></div>

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

## CSS Chart Top

<div style="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;"></div>

.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

<div style="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;"></div>

.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

<div style="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;"></div>

.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

<div style="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;"></div>

.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

<div style="width:0; height:0; border-right:50px solid transparent; border-top:50px solid red; border-left:50px solid red; border-bottom:50px solid transparent;"></div>

.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

<div style="width:0; height:0; border-right:50px solid red; border-top:50px solid red; border-left:50px solid transparent; border-bottom:50px solid transparent;"></div>

.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

<div style="width:0; height:0; border-right:50px solid transparent; border-top:50px solid transparent; border-left:50px solid red; border-bottom:50px solid red;"></div>

.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

<div style="width:0; height:0; border-right:50px solid red; border-top:50px solid transparent; border-left:50px solid transparent; border-bottom:50px solid red;"></div>

.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

<div style="width:0; height:100px; border-right:50px solid blue; border-left:50px solid blue; border-bottom:30px solid transparent;"></div>

.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](http://coveloping.com/tools/css-shapes-generator)

UpChecker

Reliable uptime monitoring and instant alerts for any website downtime.

  • Uptime Monitoring
  • Performance Monitoring
  • SSL Certificate Alerts
  • Domain Monitoring
  • DNS Checker
  • XML Sitemap Monitoring
Start Monitoring from $1