Диагональные линии в HTML в 8 разных направлениях

Question

С помощью программы JAVA я создаю головоломку для поиска слов в HTML (с использованием параметров table / tr / td).

Я пытаюсь создать другую таблицу, показывающую решение этой головоломки. Например, как показано здесь.

http://www.puzzles.ca/wordsearch/kids_fourth_of_july_solution.html

Можно ли генерировать такие формы? (если нет, я могу жить с рисованием ЛИНИЙ, чтобы показать решение). Слова могут быть размещены в любом из направлений (горизонтальное, вертикальное, диагональное)

Может кто-нибудь кинуть несколько указателей для достижения этого в HTML?

Спасибо

Answer 1

Я думаю, что это сделает работу

HTML

<div class="solutionline" style="width:Npx;transform:rotate(Ndeg)"></div>

CSS

.solutionline{

border-radius:5px;
height:15px;
background:transparent;
border:2px solid black;

}

Удачи с проектом