Shapes with CSS

The following shapes use only a single HTML element and some CSS. Some of the shapes can be use with content, but some of them like the triangles, trapezoid or the last special shapes can’t be used with content.

Demo

The CSS for the shapes is:

1. Square

#square {
  width: 100px;
  height: 100px;
  background: green;
}

2. Rectangle

#rectangle {
  width: 200px;
  height: 100px;
  background: green;
}

3. Circle

#circle {
  width: 100px;
  height: 100px;
  background: green;

  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

4. Oval

#oval {
  width: 200px;
  height: 100px;
  background: green;

  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
}

5. Triangle

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

6. Triangle Top Left

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid green;
  border-right: 100px solid transparent;
}

7. Trapeziod

#trapezoid {
  border-bottom: 100px solid green;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 100px;
}

8. Pacman

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid green;
  border-left: 60px solid green;
  border-bottom: 60px solid green;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

9. Talk Bubble

#talk-bubble {
  width: 120px;
  height: 80px;
  background: green;
  position: relative;

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

#talk-bubble:after {
  content:"";
  position: absolute;
  right: 100%;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid green;
  border-bottom: 13px solid transparent;
}

10. Yin Yang

#yin-yang {
  width: 96px;
  height: 48px;
  background: #fff;
  border-color: black;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  position: relative;

  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

#yin-yang:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: black;
  border: 18px solid #fff;
  width: 12px;
  height: 12px;

  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

#yin-yang:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #fff;
  border: 18px solid black;
  width: 12px;
  height: 12px;

  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

For more shapes made only with CSS visit css-tricks.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s