Please help me with some css

[Eduard]

Guys what do you think it is possible to achieve this only with css? Right now I’m using an image to achieve this. Basically I have a hr tag and I want to use this [effect](http://beyzabranding.com/coreFiles/wp-content/themes/beyza-branding/images/aston_martin/hr.png “effect”).

Right now my css for the styling is this piece of code:
hr {
background-image: url(“../images/aston_martin/hr.png”);
background-color: transparent;
height: 43px;
}

Any help it will be much appreciated.

[Kitty Giraudel]

You can do it with CSS only, but it will not be supported by all browsers. I’d recommand using a data:url encoded image in your stylesheet.

[Eduard]

Hi Hugo, thank a lot, can you please point out some link about this, or can you give me some codepen codes? or something as an example?

[Kitty Giraudel]

The problem of your solution is that you do an extra HTTP request, which is as you may know, “bad” for performance. You have then 4 solutions to deal with your problem:

_ leave it as is; an extra HTTP request is no big deal even if it’s not optimized
_ include your image in a sprite with your other background images, and position it accordingly
_ [convert](http://dataurl.net/#dataurlmaker) your image into an encoded image in your CSS
_ use pure CSS to do so, making sure to provide a decent fallback for unsupported browsers

[Eduard]

I really don’t want to use image, cause as you can see the oblique part is very bad quality, I don’t know why, I created the image in Photoshop, and that oblique line is just rotated with almost 45 degree or something. I was thinking in using pseudo elements, but I have failed to do so.

[Eduard]

Hugo, after a close inspection and some reading, I will decide to use data:url encoded image in my css. It’s really amazing. So thank you so much for this. Have a great day. Cheers.

[Kitty Giraudel]

@Eduard: Pure CSS way: http://jsfiddle.net/LSqtm/.

[Eduard]

Thank a lot you’re a STAR.

[Author]

Posts