Uma lua crescente pode ser feita apenas manipulando seletores e propriedades do CSS.

Para isso é necessário utilizar a propriedade box-shadow que cria uma sombra no elemento e a propriedade border-radius que arredonda as bordas do elemento.

A propriedade box-shadow pode receber os seguintes valores offset-x e offset-y que determinam a distância no eixo do x e no eixo do y respectivamente para a sombra do elemento, ele pode ainda receber mais 2 valores que não são obrigatórios o blur-radius que serve para desfocar o elemento e o spread-radius que determina o tamanho da sombra, e por último a cor da sombra. Os valores devem ser inseridos nesta ordem.

Vamos primeiramente criar um objeto quadrado com fundo preto e sombra cinza.

<div class=”meiaLua”></div>

.meiaLua { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; background-color: black; border-radius: 0px; box-shadow: 25px 10px 10px 10px gray; }

Vamos “transformar” nosso objeto quadrado em um circulo, apenas modificando a propriedade border-radius para 50%.

border-radius: 50%;

Para que possamos ver apenas a sombra do nosso objeto devemos mudar a cor de fundo para transparente.

background-color: transparent;

Já é possível ver a meia lua, vamos agora apenas fazer alguns ajustes, trocando os valores do terceiro e o quarto atributo da propriedade box shadow para 0.

box-shadow: 25px 10px 0 0 gray;

Pronto, temos uma lua crescente apenas usando CSS.