Drawing primitives with CSS

Drawing primitives is the easiest and main case in graphic fundamentals. In CSS, it can be used in common cases such as adding details to buttons or any other DOM elements. Let's learn the basics of drawing primitives in CSS.

How to draw a rectangle/square

The easiest primitive to draw in CSS is a rectangle. Let's draw a simple rectangle using the following code:

HTML code:

<div class="rectangle"></div>

SASS code:

.rectangle
width: 100px
height: 200px
background: black

Compiled CSS:

.rectangle {
    width: 100px;
    height: 200px;
    background: black;
}

This will draw a rectangle in the browser as follows:

To draw a square, we need to create the following code:

HTML code:

<div class="square"></div>

SASS code:

.square
width: 100px
height: 100px
background: black

Compiled CSS:

.square {
    width: 100px;
    height: 100px;
    background: black;
}

Reusable mixins for square and rectangle:

=rectangle($w, $h, $c)
  width: $w...