CSS3 Shapes Cheat Sheet

A dead simple collection of CSS3 shapes for funky website design and web apps. Free to use and abuse in any shape (See what I did there? Lol). If you have any questions then please don’t hesitate to get in touch with me on Twitter or leave a comment on our CSS3 Shapes Cheat Sheet blog post on our site.

Demo

View the CSS3 Shapes Cheat Sheet demo page.

CSS3 Code

.css3-circle {
  width: 112px;
  height: 112px;
  background: #b33446;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
}

.css3-egg {
   display:block;
   width:78px; 
   height:112px;
   background-color:#248ab3;
   -webkit-border-radius:63px 63px 63px 63px/108px 108px 72px 72px;
   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

.css3-cone { 
  width: 0; 
  height: 0; 
  border-left: 82px solid transparent; 
  border-right: 82px solid transparent; 
  border-top: 112px solid #399785; 
  -moz-border-radius: 50%; 
  -webkit-border-radius: 50%; 
  border-radius: 50%; 
}

.css3-trapezium {
    border-bottom: 56px solid #b33446;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    height: 0;
    width: 112px;
}

.css3-oval {
  width: 112px;
  height: 56px;
  background: #248ab3;
  -webkit-border-radius: 100px / 50px;
  -moz-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
}
.css3-rectangle {
  width: 112px;
  height: 56px;
  background: #399785;
}

.css3-triangle-tleft { 
   width: 0; 
   height: 0; 
   border-top: 112px solid #b33446; 
   border-right: 112px solid transparent; 
}

.css3-triangle-down {
  width: 0;
  height: 0;
  border-top: 112px solid #248ab3;
  border-left: 56px solid transparent;
  border-right: 56px solid transparent;
}

.css3-triangle-tright { 
   width: 0; 
   height: 0; 
   border-top: 112px solid #399785; 
   border-left: 112px solid transparent; 
}

.css3-triangle-right {
  width: 0;
  height: 0;
  border-top: 56px solid transparent;
  border-left: 112px solid #b33446;
  border-bottom: 56px solid transparent;
}

.css3-square {
  width: 112px;
  height: 112px;
  background: #248ab3;
}

.css3-triangle-left {
  width: 0;
  height: 0;
  border-top: 56px solid transparent;
  border-right: 112px solid #399785;
  border-bottom: 56px solid transparent;
}

.css3-triangle-bleft { 
   width: 0; 
   height: 0; 
   border-bottom: 112px solid #b33446; 
   border-right: 112px solid transparent; 
}

.css3-triangle-up {
  width: 0;
  height: 0;
  border-bottom: 112px solid #248ab3;
  border-left: 56px solid transparent;
  border-right: 56px solid transparent;
}

.css3-triangle-bright { 
   width: 0; 
   height: 0; 
   border-bottom: 112px solid #399785; 
   border-left: 112px solid transparent; 
}

.css3-pacman { 
  width: 0px; 
  height: 0px; 
  border-right: 56px solid transparent; 
  border-top: 56px solid #b33446; 
  border-left: 56px solid #b33446; 
  border-bottom: 56px solid #b33446; 
  border-top-left-radius: 56px; 
  border-top-right-radius: 56px; 
  border-bottom-left-radius: 56px; 
  border-bottom-right-radius: 56px;
}

.css3-moon { 
  width: 100px; 
  height: 100px; 
  border-radius: 50%; 
  box-shadow: 15px 15px 0 0 #248ab3;
}

.css3-column {
  width: 56px;
  height: 112px;
  background: #399785;
}

Contribution

Free welcome to commit and push changes to this project but please attempt to keep the same style as displayed in the demo file, after-all we don’t want the demo design looking pants now, do we?

Connect with Simon Hayter

• About.me
• Dribbble.com
• Twitter.com