---
id: 587d78a6367417b2b2512ade
title: Create a More Complex Shape Using CSS and HTML
challengeType: 0
videoUrl: ''
localeTitle: Crie uma forma mais complexa usando CSS e HTML
---
## Description
Uma das formas mais populares do mundo é a forma do coração, e neste desafio você criará um usando CSS puro. Mas primeiro, você precisa entender os pseudo-elementos ::before
e ::after
. Esses pseudo-elementos são usados para adicionar algo antes ou depois de um elemento selecionado. No exemplo a seguir, um pseudoelemento ::before
é usado para adicionar um retângulo a um elemento com o heart
da classe: .heart :: before {
conteúdo: "";
cor de fundo: amarelo;
raio de fronteira: 25%;
posição: absoluta;
altura: 50 px;
largura: 70px;
top: -50px;
esquerda: 5px;
}
Para que os pseudo-elementos ::before
e ::after
funcionem corretamente, eles devem ter uma propriedade de content
definida. Essa propriedade geralmente é usada para adicionar itens como uma foto ou texto ao elemento selecionado. Quando os pseudoelementos ::before
e ::after
são usados para criar formas, a propriedade content
ainda é necessária, mas é definida como uma string vazia. No exemplo acima, o elemento com a classe heart
possui um pseudoelemento ::before
que produz um retângulo amarelo com height
e width
de 50px e 70px, respectivamente. Este retângulo tem cantos arredondados devido ao seu raio de 25% e está posicionado absolutamente a 5px da left
e 50px acima da top
do elemento.
## Instructions
Transforme o elemento na tela em um coração. No heart::after
selector, mude a background-color
para pink e o border-radius
para 50%. Em seguida, segmente o elemento com o heart
da classe (apenas heart
) e preencha a propriedade transform
. Use a função rotate()
com -45 graus. ( rotate()
funciona da mesma forma que skewX()
e skewY()
). Finalmente, no heart::before
selector, defina sua propriedade content
para uma string vazia.
## Tests
```yml
tests:
- text: 'A propriedade background-color
do heart::after
selector deve ser rosa.'
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The background-color
property of the heart::after
selector should be pink.");'
- text: 'O border-radius
de border-radius
do heart::after
seletor deve ser de 50%.'
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The border-radius
of the heart::after
selector should be 50%.");'
- text: A propriedade transform
para a classe heart
deve usar uma função rotate()
definida como -45 graus.
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The transform
property for the heart
class should use a rotate()
function set to -45 degrees.");'
- text: 'O content
do heart::before
selector deve ser uma string vazia.'
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The content
of the heart::before
selector should be an empty string.");'
```
## Challenge Seed
## Solution
```js
// solution required
```