CSS allows developers to create various kinds of shapes by controlling the height, weight, border, and other properties of certain tags.
Here is the step-by-step guide to create triangle, circle, trapezoid, and parallelogram shape in CSS:
Triangle:
```
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
```
This creates a triangle by using borders. The borders are transparent but the bottom border is solid, creating a triangle shape.
Circle:
```
.circle {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
```
By setting the border-radius to 50% you’re able to create a circle with your div.
Trapezoid:
```
.trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
```
For this trapezoid, the top width is shorter than the bottom width and the left/right borders are transparent.
Parallelogram:
```
.parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
}
```
A parallelogram shape can be formed by skewing an HTML element at a certain degree.
You can combine these techniques, as well as using other css properties like clipping and transforms, to create even more complex shapes. You can also use SVG for creating complex shapes and graphics.
