I am trying to get a banner effect on my website. It's not public (the files (Sorry!)).
There is a pattern in the background and i have a div with background then i am using a :before element and i'm trying to get the background of the page come though the css triangle on the :before element but i cant seem to do that at all.
You know what @Htmlmainiac I'm not too good with pseudo elements myself and it still confuses me on what makes it look like a transparent triangle. I need to learn how to use the :before and :after effectively still. Hopefully someone else could explain to you (and me)
Sorry @rodolpheb but i've fixed it and that is not the sort i'm after.
iff you want to see the result its live here (the litle banners with the dates.)
I am trying to get a banner effect on my website. It's not public (the files (Sorry!)).
There is a pattern in the background and i have a div with background then i am using a :before element and i'm trying to get the background of the page come though the css triangle on the :before element but i cant seem to do that at all.
Help. Please!
@Htmlmainiac, make sure you're including
content: '';in your pseudo elements..could that be it?no its the background not it not appearing.
I'm sorry, I must have misread it. Are you using borders to create the triangle?
Can you take a printscreen and upload it to Imgur and share it with us here at least?
ok @Watson90
The screenshot is here
The arrows represent were the triangles should be
@Htmlmainiac, z-index?
yes but what is happening is im setting transparent border and the box background is coming through.
because the transparent border is just that....transparent..
I'm slightly confused, that black background you have in your image isn't the actual background you're using for your site, correct?
This will help you - http://jsfiddle.net/cszLX/
Correct @ChrisP
@Watson90 Thanks just what i was looking for and a bit nicer. But what part makes the triangle in that please?
You know what @Htmlmainiac I'm not too good with pseudo elements myself and it still confuses me on what makes it look like a transparent triangle. I need to learn how to use the
:beforeand:aftereffectively still. Hopefully someone else could explain to you (and me)Hi here is one way to create a triangle:
http://codepen.io/joe/pen/hgJmq
Sorry @rodolpheb but i've fixed it and that is not the sort i'm after. iff you want to see the result its live here (the litle banners with the dates.)
Sorry, cannot open your link :\
ill try to edit it
ok its fixed