[Solved] creating a simple testimonials box

[magician11]

So I’ve gotten a fairly basic looking testimonials box here: http://jsfiddle.net/magician11/g5DBA/

How do I get the down arrow to not be filled.. and maybe not have the top border on it so the border of the full testimonials box is one line?

Thanks!

[Paulie_D]

That’s actually tricky.

I see you are using a div to create the triangle…In general I wouldn’t do that.

Use a pseudo element instead. You still come up with the same problem but you don’t have unnecessary HTML in your mark-up.

Why tricky…because to create the actual border you would need another triangle (white) inside/over the ‘outer’ triangle to mask it off.

http://jsfiddle.net/Paulie_D/cQazk/3/

[magician11]

Thanks Paulie_D. Worked perfectly. And yes, I appreciate the point about reducing HTML. I recently learnt about the :before and :after selector and try to use them where I can now.

[Author]

Posts