CSS border edges pixel-art style

[markbilly]

Hi everyone I have divs in my game for speech bubbles. Right now I use images for the backgrounds which takes care of the borders. I want to be able to make the speech bubbles different sizes dynamically, however. The only way I can see of doing this whilst maintaining the strict scaled pixel art style is to use css borders.

 

Then, I have the border 1px if scaling is 100% and 2px if scaling is 200%, etc.

 

Only problem is a can't work out how to replicate the borders I have now with css (or css3).

 

Here is what I have right now as an image:

 

 

I'd be glad if anyone could help.

 

(I hope I posted this is the right place?)

 

Regards,

 

Mark

[P.Uri.Tanner]

Made a codepen for you: 

http://codepen.io/Fenchurchh/pen/oBwlg

[markbilly]

That's pointed me in exactly the right direction thank you! :-)

 

Didn't think to use solid shadows. Very clever.

[P.Uri.Tanner]

glad to help. Iam curious what you are working on!

 

It's rather difficult to replicate UI in HTML and make good use of HTML5 Canvas/WebGL. 

 

I expanded the bubbles a bit:

http://codepen.io/Fenchurchh/pen/oBwlg

[markbilly]

Heh, well it's amazing what you can do. Those are pretty cool.

 

I'm working on a HTML5 remake of my 2011 game. Task number one was to make it look less shoddy! ;-)

[Techhubsolutions]

Heh, well it's amazing what you can do. Those are pretty cool.

 

I'm working on a HTML5 remake of my 2011 game. Task number one was to make it look less shoddy! ;-)

I am impreesed with your work I hope my team would be able to do the same