# Como desenhar um coração usando CSS

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700319981262/297ab938-df1a-4b56-aa96-d3d1af26a06c.jpeg)

Olá, pessoal. Aproveitando a semana dos namorados, vou ensinar como fazer um coração usando apenas *CSS* (pode ser usado como mimo nerd para aquela pessoa especial 😻 💻).

1.  Em primeiro lugar vamos começar criando nosso html e incluindo uma referência para o arquivo *styles.css* e uma *div* em branco. Essa *div* terá uma referência para a class “*heart*”, onde iniciaremos o trabalho.

2) Em seguida, no nosso arquivo *styles.css*, vamos criar um quadrado e dar uma rotação de 45º.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700319982708/9e5332f5-0507-4016-b598-d46d8a5c2dd4.png)

3) O próximo passo é criar mais 2 quadrados com cantos arredondados. Desenhei os quadrados de vermelho para que possamos vê-los. Note aqui a utilização dos pseudo-elements *:before* e *:after*.

Esses pseudo-elements servem para inserir conteúdo antes/depois do conteúdo de algum elemento. No nosso caso, estou inserindo mais 2 quadrados antes e depois do nosso quadrado original.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700319984022/eff2c50b-9bd1-4f64-8703-de695acf8f28.png)

4) Para finalizar, nosso último passo será posicionar nossos 2 novos quadrados terminando o desenho do coração.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700319985130/5a7213d9-7d28-46ab-840b-ba9fea2412c9.png)

5) No final, nosso css deve estar dessa forma:

E nosso coração:

No próximo texto, vou ensinar como fazer uma animação para deixar o coração pulsando.

Referências:

[**CSS Pseudo-elements**  
*Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript…*www.w3schools.com](https://www.w3schools.com/css/css_pseudo_elements.asp "https://www.w3schools.com/css/css_pseudo_elements.asp")[](https://www.w3schools.com/css/css_pseudo_elements.asp)

[**I Heart CSS | CSS-Tricks**  
*I like to think of CSS as a love language. If written well, it can be as lovely as poetry. There are rules, semantics…*css-tricks.com](https://css-tricks.com/hearts-in-html-and-css/ "https://css-tricks.com/hearts-in-html-and-css/")[](https://css-tricks.com/hearts-in-html-and-css/)