Adding "Accent Box" with out text in css

[imfresno]

I’m struggling on a couple of css tricks that are needed on a website of mine.

I’ve taken and added the code here – http://jsfiddle.net/egmdjcuf/1/

image of what it need’s to look like is right here

http://tinypic.com/r/a3cizb/8

I need to remove the text from the span tag while keeping the width.

Thanks for your help in advance!

RS

[shaneisme]

I know what you’re asking, but it’s an odd request. Can we have more information on why you want to do this? There might be a better way to set it up from the ground up rather than try to do exactly what you’re asking.

[imfresno]

Yes please on a better way if possible.

It’s an accent piece used on 17 pages on my website.

would 2 span elements work?
inline-block
height: 10px
width: 50px

Thanks for your quick reply!

[shaneisme]

I’m not really sure what accent piece means in this case…

What are you trying to accomplish? Describe it, or provide a screenshot / drawing.

[imfresno]

http://tinypic.com/r/a3cizb/8

[shaneisme]

OK, so it’s literally just for decoration?

Best case scenario would be to set up an SVG to sit there for you. You could use any number of graphical editors, and then just put the image into a container that is 50% the width of the parent and voilà.

Technically, you could do it with HTML/CSS… but you certainly wouldn’t want to do it with your original idea. You’re mixing presentation and design which is a big no-no.

Here’s an ugly way of doing it (you’d just need to change colors, I also didn’t do much for responsive testing of edge cases):

http://codepen.io/drainpip/pen/oKdGs

[imfresno]

If I created it in like illustrator would I still be able to make it responsive?

[shaneisme]

SVG, like HTML, is inherently “responsive”, we’re the ones that mess it up :)

[imfresno]

Hey man, it looks good,

I want to thank you shaneisme :)!

[Author]

Posts