рисуя изображение как показано

Question

Мне нужно нарисовать такое изображение, как http://www.freeimagehosting.net/uploads/b8c3b1a16c.jpg http://www.freeimagehosting.net/uploads/b8c3b1a16c.jpg

как .. a + пометьте в центре и на концах строк текстовое поле. как я это делаю .. я пытался. но не мог .. должен ли я использовать изображение для символа + или я могу сделать в css ...

или что я должен написать для него ...

Answer 1

Вы можете использовать DIV с абсолютным позиционированием для своих «ящиков» и использовать два DIV для вертикальных и горизонтальных линий.Что-то (не проверено), например:

CSS:

.box { position:relative; }
.box-end { position:absolute; border:1px solid red; background:white; overflow:hidden; z-index:400; }
.box-end-v { width:20px; height:40px; }
.box-end-h { width:40px; height:20px; }
.box-end-top { top:0px; left:30px; }
.box-end-bottom { top:80px; left:30px; }
.box-end-left { top:30px; left:0px; }
.box-end-right { top:30px; left:80px; }
.box-line { position:absolute; background:black; z-index:100; }
.box-line-v { top:20px; left:50px; width:1px; height:60px; }
.box-line-h { top:50px; left:20px; width:60px; height:1px; }

HTML:

<div class="box">
   <div class="box-end box-end-h box-end-top">T</div>
   <div class="box-end box-end-h box-end-bottom">B</div>
   <div class="box-end box-end-v box-end-left">L</div>
   <div class="box-end box-end-v box-end-right">R</div>
   <div class="box-line box-line-v"></div>
   <div class="box-line box-line-h"></div>
</div>

Однако могу ли я предложить это вместо этого?http://raphaeljs.com/

Answer 2

Вы создаете table с 2 строками и 2 столбцами, и вы используете border-right и border-bottom для верхней левой ячейки и border-top и border-left для нижней правой.Не забудьте добавить   в каждую ячейку.Затем в CSS вы можете определить размеры ячейки.

Надеюсь, я помог.