ContextQMD
Back to Freecodecamp

Step 23

curriculum/challenges/english/blocks/learn-intermediate-css-by-building-a-cat-painting/6676a8b01e56ec1a1e07c202.md

latest3.1 KB
Original Source

--description--

Notice that you now have a white square with thick borders. The borders have diagonal edges which can be used to create triangles.

Within the same class selector adjust height and width to 0. Set the left, right and top border to transparent.

Remove the background-color property, and you should see a triangle.

--hints--

You should have a .cat-right-ear selector.

js
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))

Your .cat-right-ear selector should have a height property set to 0. Don't forget to add a semi-colon.

js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height == '0px')

Your .cat-right-ear selector should have a width property set to 0. Don't forget to add a semi-colon.

js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '0px')

Your .cat-right-ear selector should have a border-left property set to 35px solid transparent. Don't forget to add a semi-colon.

js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent')

Your .cat-right-ear selector should have a border-right property set to 35px solid transparent. Don't forget to add a semi-colon.

js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent')

Your .cat-right-ear selector should have a border-top property set to 35px solid transparent. Don't forget to add a semi-colon.

js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid transparent')

Your .cat-right-ear selector should have a border-bottom property set to 35px solid red. Don't forget to add a semi-colon.

js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')

Your .cat-right-ear selector should not have a background-color property.

js
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor)

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fCC Cat Painting</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main>
      <div class="cat-head">
        <div class="cat-ears">
          <div class="cat-left-ear">
            <div class="cat-left-inner-ear"></div>
          </div>
          <div class="cat-right-ear">
            <div class="cat-right-inner-ear"></div>
          </div>
        </div>
      </div>
    </main>
</body>
</html>
css
* {
  box-sizing: border-box;
}

body {
  background-color: #c9d2fc;
}

.cat-head {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: linear-gradient(#5e5e5e 85%, #45454f 100%);
  width: 205px;
  height: 180px;
  border: 1px solid #000;
  border-radius: 46%;
}

--fcc-editable-region--
.cat-right-ear {
  height: 100px;
  width: 100px;
  background-color: white;
  border-left: 35px solid blue;
  border-right: 35px solid blue;
  border-top: 35px solid red;
  border-bottom: 35px solid red;
}
--fcc-editable-region--