[Solved] list styling pointed ends

[dwjoll]

Hi,

How could I style a list to have pointy/triangle ends with solid background colour?

http://i61.tinypic.com/15yji1f.png

Thanks for any help.

Bests,
Dan

[Paulie_D]

Easy to do with pseudo-elements and borders.

http://codepen.io/Paulie-D/pen/ByyqLz

[Paulie_D]

Here’s a neat little option using currentColor which makes everything the same color without having to explicitly set a color to each pseudo element.

It does require an additional span to “reset” the color to white but that’s a small price to pay for the neatness of the effect and simplicity of the CSS.

http://codepen.io/Paulie-D/pen/ZYYqyo

[dwjoll]

Exactly what I wanted! Thanks Paulie :)

[Author]

Posts