Member Avatar for suse17

Hi, We All know how to create a Table in html, pretty simple:
I was looking to create a trapezium, parellogram or some other odd figure. I was just wondering whether I have to use the table tag with some special/extra attributes to create trapezium or is it some different tag that works with these types of figures.

  • 3 Contributors
  • 3 Replies
  • 120 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by suse17

Dani AI

Generated

For : creating a trapezium (or other non-rectangular shapes) is best done with CSS or SVG rather than trying to force an HTML table into that role. CSS clip-path or an inline SVG give crisp, scalable shapes, keep markup semantic, and work well with responsive layouts.

A simple CSS clip-path trapezoid (works natively in modern browsers; add -webkit-clip-path for older WebKit):

.trapezoid {
  width: 300px;
  height: 120px;
  background: #4caf50;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
}

If the shape is graphic or needs precise control, use SVG polygon. SVG scales perfectly and can include accessible text/arcs:

<svg width="300" height="120" viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Decorative trapezoid">
  <polygon points="30,0 270,0 300,120 0,120" fill="#4caf50" />
</svg>

Notes and practical tips: test interactions and keyboard/accessibility — if the shape conveys content, keep text in the DOM or add ARIA labels. For legacy browsers, provide a simple rectangular fallback (background image or inline SVG) and progressively enhance with clip-path/SVG. and were right that scripting or images can be used; today prefer native CSS/SVG for maintainability and performance. For reference and compatibility details see the MDN guides on clip-path and SVG polygon: clip-path (MDN) and SVG polygon (MDN).

Recommended Answers

All 3 Replies

Member Avatar for itsjareds

You may want to check out this JavaScript implementation of shape drawing.

Member Avatar for JugglerDrummer

If you want irregular type layouts, I would suggest images or a flash animation. It's easier than trying to get a nice cross browser implementation.

<inside joke>XD you asked this same question on dreamincode.net. Nothing wrong with that though, make sure you got an answer. :D</inside joke>

Member Avatar for suse17

If you want irregular type layouts, I would suggest images or a flash animation. It's easier than trying to get a nice cross browser implementation.

<inside joke>XD you asked this same question on dreamincode.net. Nothing wrong with that though, make sure you got an answer. :D</inside joke>

You are right. But I didn't got anything at DIC.
btw who r u at DIC.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.