Drawing Shapes in HTML5

I am currently creating an asp.net webpage diagram using images for rectangles, rounded rectangles and arrows.

Does HTML5 / CSS3 offer ways to display such graphics without resorting to images?

Any guidance on this would be appreciated.

Thanks!
LVL 2
codequestAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
You can change the elements size and position either by your own serverside code prior to the page being sent to the browser by updating the html and css or using client side js/jquery.   Positioning would be done via margin-left and margin-top and size by width and height.   You will need to develop your own formula as to how all of this works.  I think the easy part is done for you here.  The hard part is going to be translating what you actually need as far as size and position into some type of algorithm to meet your needs.
0
 
Tom BeckConnect With a Mentor Commented:
Definitely. There are many offerings out there like this one showing how to make various shapes with css. Careful though. Not all effects work in all browsers.

http://css-tricks.com/examples/ShapesOfCSS/
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Do you want to supply a simple graphic image of what you are trying to achieve?
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
codequestAuthor Commented:
Sample attached.   Text would overlay the graphics.  The arrowheads might need to be larger.
diagram-sample.png
0
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Are you trying to create a flow chart or a one off just using css?  There are a number of charting options for jquery for instance if that is what this is for.  Otherwise, if just a one off image you can use TommyBoy's sample's.

There are going to be some slicker ways to do this, but here is something simple to digest http://jsbin.com/UcaDiMe/1/edit?html,css,output
#container{width:600px;}
#leftbox {
	width: 140px;
	height: 100px;
	background: gray;
    border-radius:30px;
    float:left;
   
}
.abc{
  font-size:40px;
  margin-top:20px;
  text-align:center;
}

#rightbox {
	width: 150px;
	height: 100px;
	background: gray;
    float:left;
}
#middle {
	width: 150px;
	height: 10px;
	background: black;
    float:left;
    margin-top:40px;
}
.def{
  font-size:40px;
  margin-top:-50px;
  text-align:center;
}

Open in new window

<!DOCTYPE html>
<html>
<head>

<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="leftbox"><div class="abc">ABC</div></div>
    <div id="middle"><div class="def">DEF</div></div>
    <div id="rightbox"><div class="abc">GHI</div></div>
  </div>
</body>
</html>

Open in new window


You may want to check these out too as an alternative
http://jsplumbtoolkit.com/demo/flowchart/jquery.html
http://www.joshwright.com/projects/flomojo-convert-text-to-flowchart
http://pranavon.net/jquery-plugin-for-building-flowcharts-and-workflow-blocks/
0
 
codequestAuthor Commented:
Thanks for the inputs.  The target is a dynamically drawn diagram. It has a very specific layout that it has to follow, so the Jquery flowchart programs would probably not work. Those are Very interesting though. It could be also that CSS is not a solution because ie8 does not support rounded border radius, although by app release date it may be feasible to say Ie8 is not supported. At any rate these are very good and eye-opening suggestions.

I guess one more requirement that i'm not sure how would work in CSS is that the diagrams need to be scalable, with a zoom slider, not just through browser Pinch and zoom. Any suggestions on that would be appreciated. Thanks!
0
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
If you are worried about pinch and zoom...you shouldn't be worried about ie8.  I wouldn't even worry about any ie lower then 10 at this point especially if this is the type of stuff you want to do.  

When I tested pinch and zoom on my phone, the above example worked fine.

Another option to consider is html canvas but take a little more thought.  https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

The options I showed you with jquery might actually be easier to manage if you need to show relationships.  If what you want to show is static in that the 2 box's will always be in the same place but with different text, then that will work fine.
0
 
Tom BeckConnect With a Mentor Commented:
Just playing with @padas's jsbin example.

Here's another version (with a css arrow head) that uses jQuery to make the diagram responsive to changes in the browser window size.

http://jsbin.com/UcaDiMe/3/
0
 
codequestAuthor Commented:
Thanks for the inputs.  These have been very educational, and I'm getting the sense I can accomplish what I want without using images.

There are two more requirements that I did not spell out (sort of buried them under the phrase "dynamically drawn".)
1)  the elements of the diagram may be re-positioned on the fly.
2)  the elements of the diagram may change size in relation to the other parts.

The raw information about size and position of all the diagram parts will be recalculated on the servers after any user action, sent to the browser via JSON and then translated into DOM.  It seems like I should be able to make the necessary CSS generation part of the translation from JSON into DOM.

Confirmation on that would be appreciated.  The rest I'm confident I can figure out from the examples that have already been provided.
0
 
codequestAuthor Commented:
Very helpful comments, all.  Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.