drawing a image like shown
I need to draw such a image like
like.. a + mark at centre and at ends of lines a text box. how do i do it.. i tried.but could not..should 开发者_开发问答i use a image for + symbol or can i do in css...
or what css should i write for it...
You could use absolute positionned DIV for your "boxes" and use two DIV for the vertical and horizontal lines. Something (untested) like :
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>
However, may I suggest this instead? http://raphaeljs.com/
You make a table
with 2 rows and 2 columns, and you use border-right
and border-bottom
for the top left cell, and border-top
and border-left
for the bottom right. Don't forget to add a
in each cell. Then in the CSS, you can define the cell's sizes.
Hope I have helped.
精彩评论