Here are a couple of examples of how to create basic geometric shapes by using nothing but pure css.
Square +#
```css
.square {
width: 100px;
height: 100px;
}
```
Circle +#
```css
.circle {
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
```
Oval +#
```css
.oval {
width: 160px;
height: 100px;
-moz-border-radius: 80px / 50px;
-webkit-border-radius: 80px / 50px;
border-radius: 80px / 50px;
}
```
Triangle Up +#
```css
.triangle-up {
background: transparent;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom-width: 100px;
border-bottom-style: solid;
}
```
Triangle Down +#
```css
.triangle-down {
background: transparent;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top-width: 100px;
border-top-style: solid;
}
```
Triangle Right +#
```css
.triangle-right {
background: transparent;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left-width: 100px;
border-left-style: solid;
}
```
Triangle Top Right +#
```css
.triangle-top-right {
background: transparent;
width: 0;
height: 0;
border-top-width: 100px;
border-top-style: solid;
border-right: 100px solid transparent;
}
```
Triangle Bottom Right +#
```css
.triangle-bottom-right {
background: transparent;
width: 0;
height: 0;
border-bottom-width: 100px;
border-bottom-style: solid;
border-right: 100px solid transparent;
}
```
Triangle Left +#
```css
.triangle-left {
background: transparent;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right-width: 100px;
border-right-style: solid;
}
```
Triangle Top Left +#
```css
.triangle-top-left {
background: transparent;
width: 0;
height: 0;
border-top-width: 100px;
border-top-style: solid;
border-left: 100px solid transparent;
}
```
Triangle Bottom Left +#
```css
.triangle-bottom-left {
background: transparent;
width: 0;
height: 0;
border-bottom-width: 100px;
border-bottom-style: solid;
border-left: 100px solid transparent;
}
```
Pacman +#
```css
.pacman {
background: transparent;
width: 0px;
height: 0px;
border-right: 50px solid transparent;
border-top-width: 50px;
border-top-style: solid;
border-left-width: 50px;
border-left-style: solid;
border-bottom-width: 50px;
border-bottom-style: solid;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
```
You can combine these basic shapes with :before and :after pseudo-classes to create more elaborate shapes (like [five point stars](https://kitmacallister.com/2011/css-only-5-point-star/), or [full blown pure css icon sets](https://nicolasgallagher.com/pure-css-gui-icons/demo/)).
Make your imagination go wild.
Peace.