Passo 21

Instruções

Observe que agora você tem um quadrado branco com bordas grossas. As bordas têm arestas diagonais que podem ser usadas para criar triângulos. Você vai precisar deles para criar as orelhas do seu gato. Dentro do mesmo seletor de classe, ajuste height e width para 0. Define as bordas da esquerda, direita e superior como transparent. Remova a propriedade background-color e você deve ver um triângulo.

O que fazer:

Testes:

Você deve ter um seletor `.cat-right-ear`.
O seletor `.cat-right-ear` deve ter a propriedade `height` definida como `0`. Não se esqueça de adicionar um ponto e vírgula.
O seletor `.cat-right-ear` deve ter a propriedade `width` definida como `0`. Não se esqueça de adicionar um ponto e vírgula.
O seletor `.cat-right-ear` deve ter a propriedade `border-left` definida como `35px solid transparent`. Não se esqueça de adicionar um ponto e vírgula.
O seletor `.cat-right-ear` deve ter a propriedade `border-right` definida como `35px solid transparent`. Não se esqueça de adicionar um ponto e vírgula.
O seletor `.cat-right-ear` deve ter a propriedade `border-top` definida como `35px solid transparent`. Não se esqueça de adicionar um ponto e vírgula.
O seletor `.cat-right-ear` deve ter a propriedade `border-bottom` definida como `35px solid red`. Não se esqueça de adicionar um ponto e vírgula.
O seletor `.cat-right-ear` não deve ter uma propriedade `background-color`.

<!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>

* {
  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%;
}


.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;
}

Preview