Theo's Typesafe Cult•2y ago

Creating polygons with borders in HTML and CSS

I have spent the better part of the day trying to come up with a robust way to create polygons with a consistent border on HTML / CSS. I have tried 4 different methods so far which are all pretty inadequate. which can be found here: https://jsfiddle.net/op78fv6n/84/ Can someone help me figure out how to do this in a sane way?

How to make parallelograms work? - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

12 Replies

Unknown User•2y ago

Message Not Public

TomOP•2y ago

ok thats useful

TomOP•2y ago

https://jsfiddle.net/op78fv6n/87/

How to make parallelograms work? - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

TomOP•2y ago

updated the fiddle but that still doesnt help with most of the other stuff i appreciate it though

Unknown User•2y ago

Message Not Public

TomOP•2y ago

the 'nesting issue' is more that i have to manually figure out how to position any content i want inside the shapes for some context, im trying to make a UI that allows people to define some polygons and then put text on top of them so it would be preferable if i could figure out the default paddings computationally

andersgee•2y ago

svg has <polygon> and also <text>

<svg width="240" height="240">
<polygon fill="lime" stroke="blue" stroke-width="5" points="0,0 100,0 150,50, 50,50" />
<text stroke="black" stroke-width="1" x="50" y="30">hello</text>
</svg>

<svg width="240" height="240">
<polygon fill="lime" stroke="blue" stroke-width="5" points="0,0 100,0 150,50, 50,50" />
<text stroke="black" stroke-width="1" x="50" y="30">hello</text>
</svg>

see here for how polygon works: https://www.w3.org/TR/SVG2/shapes.html#PolygonElement

TomOP•2y ago

is there a good way to make sure the stroke width stays consistent in x and y?

andersgee•2y ago

they are consistent, I just made it quickly, the polygon is at top y=0 so the stroke is "clipped". just move the polygon down points="0,20 100,20 150,70, 50,70" for arbitrary html you would probably need to wrap it in a position relative div and put things on top, something like

<div class="relative">
<svg class="absolute" width="240" height="240">
<polygon fill="lime" stroke="blue" stroke-width="10" points="0,20 100,20 150,70, 50,70" />
</svg>
<div class="absolute-polygoncontent">
  <button>
    some button or whatever
  </button>
</div>
</div>

<div class="relative">
<svg class="absolute" width="240" height="240">
<polygon fill="lime" stroke="blue" stroke-width="10" points="0,20 100,20 150,70, 50,70" />
</svg>
<div class="absolute-polygoncontent">
  <button>
    some button or whatever
  </button>
</div>
</div>

TomOP•2y ago

im sorry. in my original fiddle i could have sworn that the svg was getting compressed in y and not in x which made it look like the stroke width was thinner on top / bottom than it was on the sides im looking at the fiddle now and im not sure what changed.... but thats not the case now interesting ok. i think ill give svgs a try then thank you very much

andersgee•2y ago

wow sorry I didnt see you actually already tried svg in your fiddle, anyway glad to help

TomOP•2y ago

np.... im new to svgs so this is going to be an adventure

Gaming

Programming

Creating polygons with borders in HTML and CSS