4.5 KiB
4.5 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78a6367417b2b2512ade | Create a More Complex Shape Using CSS and HTML | 0 | Crea una forma más compleja usando CSS y HTML |
Description
::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 {Para que
contenido: "";
color de fondo: amarillo;
radio del borde: 25%;
posición: absoluta;
altura: 50px;
ancho: 70px;
arriba: -50px;
izquierda: 5px;
}
::before
y ::after
pseudo-elements 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
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: 'La propiedad de <code>background-color</code> de fondo del <code>heart::after</code> selector debe ser rosa.'
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: 'El <code>border-radius</code> del <code>border-radius</code> del <code>heart::after</code> selector debe ser del 50%.'
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: 'El <code>content</code> del <code>heart::before</code> selector debe ser una cadena vacía.'
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
// solution required