Basic Geometric Shapes in pure CSS

Here are a couple of examples of how to create basic geometric shapes by using nothing but pure css.

Square +

    

1
2
3
4
.square {
width: 100px;
height: 100px;
}

Circle +

    

1
2
3
4
5
6
7
.circle {
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

Oval +

    

1
2
3
4
5
6
7
.oval {
width: 160px;
height: 100px;
-moz-border-radius: 80px / 50px;
-webkit-border-radius: 80px / 50px;
border-radius: 80px / 50px;
}

Triangle Up +

    

1
2
3
4
5
6
7
8
9
.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 +

    

1
2
3
4
5
6
7
8
9
.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 +

    

1
2
3
4
5
6
7
8
9
.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 +

    

1
2
3
4
5
6
7
8
.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 +

    

1
2
3
4
5
6
7
8
.triangle-bottom-right {
background: transparent;
width: 0;
height: 0;
border-bottom-width: 100px;
border-bottom-style: solid;
border-right: 100px solid transparent;
}

Triangle Left +

    

1
2
3
4
5
6
7
8
9
.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 +

    

1
2
3
4
5
6
7
8
.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 +

    

1
2
3
4
5
6
7
8
.triangle-bottom-left {
background: transparent;
width: 0;
height: 0;
border-bottom-width: 100px;
border-bottom-style: solid;
border-left: 100px solid transparent;
}

Pacman +

    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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, or full blown pure css icon sets).
Make your imagination go wild.

Peace.

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2018 BinaryMiner All Rights Reserved.

Copyright Djordje Ungar