---
id: 6676a8b01e56ec1a1e07c202
title: Step 21
challengeType: 0
dashedName: step-21
---

# --description--

Notice that you now have a white square with thick borders. The borders have diagonal edges which can be used to create triangles. You will need them to create your cat's ears.

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.exists(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.strictEqual(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.strictEqual(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.strictEqual(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.strictEqual(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.strictEqual(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.strictEqual(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.isEmpty(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--
```
