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.
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 height: $h background: $c...