An a idea for this?

medina

x10 Addict
Community Support
Messages
1,809
Reaction score
6
Points
38
Hello!I would like to do this, with no IMAGES, just CSS3 or HTML5, i know that is possible, and also know that the internet is big and can find some information, the only problem is that i dont know the name of this (I mean the cutted bottom border of the header((and not can not find something with that name)). So if someone know the name of that, can be very helpful....Obviously i tried the take a look into the source but have a lot of lines! and i dont see nothing special in the CSS
 

Attachments

  • Captura de pantalla 2014-04-12 a la(s) 21.07.37.png
    Captura de pantalla 2014-04-12 a la(s) 21.07.37.png
    963.5 KB · Views: 11

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
It can't be done without images at the current state of the art. (That's not exactly true; you can enable experimental features in the nightly/dev builds of Firefox or Chrome to do it locally on your machine, but that won't let your users see the effect).

There are a number of techniques, but you need at least an SVG image (obviously a PNG would work as well). The phrase you want to use for search is "css sawtooth border". (You can do a single triangle easily using vanilla CSS, but not a repeating pattern.) The least-obtrusive way to do it would be to create a pseudo-element using :after that has a fixed height, a transparent background color and a background-image with repeat-x. The image you would need would be very small, so you can include it in the stylesheet with a data URI (no extra resource HTTP request).
 

medina

x10 Addict
Community Support
Messages
1,809
Reaction score
6
Points
38
If you want to see the result this is my page: alejandrom.com Your information was very helpfulHave no images, just CSS :) ....
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
It's not quite cross-browser, but if you're happy with it...
 

fretwizz

Member
Messages
106
Reaction score
3
Points
18
essellar is right about not being CB compliant; better to have that IMO, I'd take his SVG suggestion.
 
Top