Create a graphic using CSS

Graphics using CSS: 

By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge, you need to work with the box-shadow property that sets the shadow of an element, along with the box-radius property that controls the roundness of the element's corners.

You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see.

In order to create a round object, the box-radius property should be set to a value of 50%.

The box-shadow property takes values for offset-x, offset-y,blur-radius, spread-radius, and a color value in that order. 

The blur-radius and spread-radius values are optional.

A practical example of this code is:

<style>

  .center {

    position: absolute;

    margin: auto;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    width: 100px;

    height: 100px;

    background-color: blue;

    border-radius: 0px;

    box-shadow: 25px 10px 10px 10px green;

  }

</style>

<div class="center"></div>

More complex shapes using CSS:

One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS.

 But first, you need to understand the ::before and ::after pseudo-elements. ::before creates a pseudo-element that is the first child of the selected element; ::after creates a pseudo-element that is the last child of the selected element. 

In the following example, a ::before pseudo-element is used to add a rectangle to an element with the class heart:

.heart::before {
  content: "";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}

For the ::before and ::after pseudo-elements to function properly, they must have a defined content property. 

This property is usually used to add things like a photo or text to the selected element. When the ::before and ::after pseudo-elements are used to make shapes, the content property is still required, but it's set to an empty string. 

In the above example, the element with the class of heart has a ::before pseudo-element that produces a yellow rectangle with height and width of 50px and 70px, respectively. 

This rectangle has round corners due to its 25% border-radius and is positioned absolutely at 5px from the left and 50px above the top of the element.