Início / coding / Perguntas / 79070825
Accepted
RomainP
Asked: 2024-10-09 22:42:46 +0800 CST

Qual é a melhor maneira de criar bordas para palavras cruzadas em CSS?

  • 772

Estou tentando criar uma "palavra cruzada" onde apenas duas palavras se cruzam. Gostaria que os quadrados fossem separados entre si por 1px, mas uma borda grossa de 5 ou 10px ao redor da palavra cruzada em si. Aqui está uma demonstração rápida do que eu gostaria de fazer, feita com o Excel:

insira a descrição da imagem aqui

Para fazer a grade, estou criando um retângulo de blocos de 6x5, alguns deles invisíveis e outros visíveis:

let word_vertical = "GHIEJ";
let junction_vertical = 4;
let word_horizontal = "ABCDEF";
let junction_horizontal = 5;

let number_of_letters_vertical = word_vertical.length;
let number_of_letters_horizontal = word_horizontal.length;
let letter_junction = word_vertical[junction_vertical - 1];

let board = document.getElementById("board");

for (let i = 0; i < number_of_letters_vertical; i++) {
    let row = document.createElement("div");
    row.className = "letter-row";

    for (let j = 0; j < number_of_letters_horizontal; j++) {
        let box = document.createElement("div");
        if (i === junction_vertical - 1 || j === junction_horizontal - 1){
            box.className = "letter-box";
            if (j === junction_horizontal - 1) {
                box.innerText = word_vertical[i];
            } else if (i === junction_vertical - 1){
                box.innerText = word_horizontal[j];
            }
        } else {
            box.className = "empty-box";
        }

        row.appendChild(box)
    }

    board.appendChild(row)
}

E aqui está o CSS:

.letter-row {
    display: flex;
}

.letter-box {
    color: black;
    border: 1px solid black;
    background-color: white;
    font-size: 3.5rem;
    font-weight: 800;
    height: 5rem;
    width: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

.empty-box {
    border: 1px solid transparent;
    height: 5rem;
    width: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

Finalmente o HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body class="game-page">
    <div id="game-board">
        <div id="board"></div>
    </div>
<script src="index.js" type="module"></script>
</body>
</html>

Isso fica parecido com isto:

insira a descrição da imagem aqui

Como você pode ver, as bordas ao redor são muito finas (1px) e as bordas entre duas células são 2px (1px para cada célula contribuindo). Eu tentei algumas coisas, incluindo aplicar bordas direcionais às caixas vazias, mas isso fica complexo muito rápido. Alguma ideia? Obrigado :)

javascript

1 respostas

  1. Best Answer

    Use o filtro de sombra projetada como @TemaniAfif sugeriu:

    let word_vertical = "GHIEJ";
let junction_vertical = 4;
let word_horizontal = "ABCDEF";
let junction_horizontal = 5;

let number_of_letters_vertical = word_vertical.length;
let number_of_letters_horizontal = word_horizontal.length;
let letter_junction = word_vertical[junction_vertical - 1];

let board = document.getElementById("board");

for (let i = 0; i < number_of_letters_vertical; i++) {
  let row = document.createElement("div");
  row.className = "letter-row";

  for (let j = 0; j < number_of_letters_horizontal; j++) {
    let box = document.createElement("div");
    if (i === junction_vertical - 1 || j === junction_horizontal - 1) {
      box.className = "letter-box";
      if (j === junction_horizontal - 1) {
        box.innerText = word_vertical[i];
      } else if (i === junction_vertical - 1) {
        box.innerText = word_horizontal[j];
      }
    } else {
      box.className = "empty-box";
    }

    row.appendChild(box)
  }

  board.appendChild(row)
}
    #board {
  filter: drop-shadow(5px 0 0) drop-shadow(-5px 0 0) drop-shadow(0 -5px 0) drop-shadow(0 5px 0)
}

.letter-row {
  display: flex;
}

.letter-box {
  color: black;
  border: 1px solid black;
  background-color: white;
  font-size: 3.5rem;
  font-weight: 800;
  height: 5rem;
  width: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.empty-box {
  border: 1px solid transparent;
  height: 5rem;
  width: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
    <body class="game-page">
  <div id="game-board">
    <div id="board"></div>
  </div>
</body>

    • 2

relate perguntas