freeCodeCamp

4.8 KiB

Raw Blame History

id	title	localeTitle	challengeType	videoUrl
587d78a6367417b2b2512ade	Create a More Complex Shape Using CSS and HTML	Crea una forma más compleja usando CSS y HTML	0

Description

Una de las formas más populares del mundo es la forma de corazón, y en este desafío creará una utilizando CSS puro. Pero primero, debe comprender los elementos pseudoelementos ::before y ::after . Estos pseudo-elementos se usan para agregar algo antes o después de un elemento seleccionado. En el siguiente ejemplo, un ::before pseudo-elemento se usa para agregar un rectángulo a un elemento con el heart la clase:

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

Para que los elementos de pseudo-elementos ::before y ::after funcionen correctamente, deben tener una propiedad de content definida. Esta propiedad se usa generalmente para agregar elementos como una foto o texto al elemento seleccionado. Cuando los pseudo-elementos ::before y ::after se usan para hacer formas, la propiedad de content sigue siendo necesaria, pero se establece en una cadena vacía. En el ejemplo anterior, el elemento con la clase de heart tiene un pseudoelemento ::before del que produce un rectángulo amarillo con height y width de 50 px y 70 px, respectivamente. Este rectángulo tiene esquinas redondeadas debido a su radio de borde del 25% y está posicionado absolutamente a 5px desde la left y 50px por encima de la top del elemento.

Instructions

Transforma el elemento en la pantalla a un corazón. En el heart::after selector, cambie el background-color a rosa y el border-radius del border-radius a 50%. A continuación, apunte el elemento con el heart la clase (solo el heart ) y complete la propiedad de transform . Utilice la función rotate() con -45 grados. ( rotate() funciona de la misma manera que skewX() y skewY() hacen). Finalmente, en el heart::before selector, establece su propiedad de content en una cadena vacía.

Tests

tests:
  - text: &#39;La propiedad de <code>background-color</code> de fondo del <code>heart::after</code> selector debe ser rosa.&#39;
    testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.");'
  - text: &#39;El <code>border-radius</code> del <code>border-radius</code> del <code>heart::after</code> selector debe ser del 50%.&#39;
    testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.");'
  - text: La propiedad de <code>transform</code> para la clase de <code>heart</code> debe usar una función <code>rotate()</code> establecida en -45 grados.
    testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.");'
  - text: &#39;El <code>content</code> del <code>heart::before</code> selector debe ser una cadena vacía.&#39;
    testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.");'

Challenge Seed

<style>
.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: ;
}
.heart::after {
  background-color: blue;
  content: "";
  border-radius: 25%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart::before {
  content: ;
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
</style>
<div class = "heart"></div>

Solution

var code = ".heart {transform: rotate(-45deg);} .heart::after {background-color: pink; border-radius: 50%;} .heart::before {content: \"\"; border-radius: 50%;}"

4.8 KiB Raw Blame History