Lignes diagonales en HTML dans 8 directions différentes

Question

Grâce à un programme JAVA, je génère un puzzle de recherche de mots en HTML (en utilisant les options table/tr/td). J'essaie de générer un autre tableau montrant la solution à ce casse-tête. Par exemple, comme indiqué ici.

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

Est-il possible de générer de telles formes? (sinon, je peux vivre en dessinant les LIGNES pour montrer la solution). Les mots peuvent être placés dans l'une des directions (horizontale, verticale, diagonale)

Quelqu'un peut-il jeter quelques pointeurs pour y parvenir en HTML?

grâce

Answer 1

Je pense que cela fera le travail

HTML

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

css

.solutionline{ 

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

} 

bonne chance pour votre projet