CSS-shapes

CSS Shapes

SCSS mixins of some of the most common shapes.

Examples

Any italicized values can be edited, just click on the value and change it to play around with the styles.

Rectangles

                    #rectangle {
                        @include rectangle(100px, 40px, red);
                    }

Parallelograms

                    #parallelogram {
                        @include parallelogram(100px, 70px, 10deg, red);
                    }

Squares

                    #square {
                        @include square(100px, red);
                    }

Circles

                    #circle {
                        @include circle(100px, red);
                    }

Ovals

                    #oval {
                        @include oval(100px, 50px, red);
                    }

Equilateral triangles

                    #up-triangle {
                        @include triangle(up, 60px, red);
                    }
                    
                    #down-triangle {
                        @include triangle(down, 60px, red);
                    }
                    
                    #left-triangle {
                        @include triangle(left, 60px, red);
                    }
                    
                    #right-triangle {
                        @include triangle(right, 60px, red);
                    }

Corner triangles

                    #top-left-triangle {
                        @include corner-triangle(top-left, 60px, red);
                    }
                    
                    #top-right-triangle {
                        @include corner-triangle(top-right, 60px, red);
                    }
                    
                    #bottom-left-triangle {
                        @include corner-triangle(bottom-left, 60px, red);
                    }
                    
                    #bottom-right-triangle {
                        @include corner-triangle(bottom-right, 60px, red);
                    }

Trapezoids

                    #trapezoid {
                        @include trapezoid(80px, red);
                    }

Chevrons

                    #up-chevron {
                        @include chevron(120px, 40px, 20deg, red, up);
                    }
                    
                    #down-chevron {
                        @include chevron(120px, 40px, 20deg, red, down);
                    }
                    
                    #left-chevron {
                        @include chevron(120px, 40px, 20deg, red, left);
                    }
                    
                    #right-chevron {
                        @include triangle(120px, 40px, 20deg, red, right);
                    }