CSS Art Code Snippets

		                
.rectangle {
    height: 50px;
    width: 100px;
    background-color: purple;
}
		                
		            

		                
.circle {
    height: 80px;
    width: 80px;
    background-color: blue;
    border-radius: 50%;
}
		                
		            

		                
.triangle {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid orange;
}
		                
		            

Play with the direction of the triangle by making a different border side the triangle color. Change the border measurements to skew the triangle.

		                
.parallelogram {
    width: 100px;
    height: 70px;
    transform: skew(30deg);
    background-color: green;
}
		                
		            

Play with the skew angle in degrees to transform the shape.

		                
/* Creates the shape and defines animation properties */

.rotating-rectangle {
    height: 50px;
    width: 100px;
    background-color: red;
    animation-name: rotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

/* Controls the animation */

@keyframes rotate {
    50% {transform: rotate(360deg);}
}
		                
		            

		                
/* Creates a circle and defines animation properties */

.color-dot {
    height: 80px;
    width: 80px;
    background-color: blue;
    border-radius: 50%;
    animation-name: change-color;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Controls the animation */

@keyframes change-color {
    from {background-color: blue;}
    to {background-color: red;}
}
		                
		            

		                
/* Creates a triangle and defines animation properties */

.moving-triangle {
    width: 0;
    height: 0;
    position: absolute;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid orange;
    animation-name: move;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

/* Controls the animation positions */

@keyframes move {
    from {left: 2%;}
    to {left: 20%;}
}
		                
		            

Play with the keyframes by changing 'left' to 'top'.
Measurement values can also be in 'px' or 'em' units.

		                
.gradient {
    height: 150px;
    width: 150px;
    background-image: linear-gradient(to right, red,
        orange, yellow, green, blue, indigo, violet);
}
		                
		            

		                
.transparency {
    height: 150px;
    width: 150px;
    background-image: linear-gradient(to bottom, rgba(117, 50, 168, 0),
        rgba(117, 50, 168, 1));
}
		                
		            

Use RGB for colors in order to change transparency (the last value) from '0' to '1'.