7

I have created a tag but have white background after the arrow on the right side

.tags {
  list-style: none;
  margin: 0;
  overflow: hidden; 
  padding: 0;
 }

http://jsfiddle.net/eR8Ye/5/

how can I remove the white background on the right side of the tag? the background of this tag is a gradient style.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
user270014
  • 581
  • 3
  • 21

4 Answers4

2

You can fix this.

http://jsfiddle.net/eR8Ye/4/

  1. Remove the right-hand padding from the parent
  2. Remove the background color from the ::after
  3. Position the ::after outside the parent, to the right (use a negative value).
Tom Pietrosanti
  • 4,184
  • 2
  • 24
  • 29
  • 2
    I would think so too, but the problem here is the gradient in the button(which isn't in the fiddle, just in the question). So what you need in addition to your answer is having a border with a gradient. – René Jun 30 '13 at 16:47
  • Oh, I didn't see that before... I don't think you can do gradients on border colors. Instead, you can invert your triangle, using it as a mask instead (make the currently transparent parts the same as the background color, and the currently colored portion transparent) – Tom Pietrosanti Jun 30 '13 at 16:53
  • 1
    Note: you can still put the padding-right on the parent, it would just be only 10px instead of the original 20px (since the ::after border on the right is 10px in size, it fit into the original 20px, so you just need 10 more to have the original look) – Andy Mudrak Jun 30 '13 at 16:55
  • thanks..it shows border of this arrow in Firefox but not in Chrome. how can I remove this border from Firefox also? – user270014 Jun 30 '13 at 17:39
  • The arrow looks fine in my firefox (v22 on mac). Might just be that your version doesn't support transparent borders? – Tom Pietrosanti Jul 01 '13 at 01:25
2

Just move arrow to the right and make its background: transparent

Fiddle

AnilkaBobo
  • 260
  • 1
  • 9
1

Change the background of the :after to match the background of its parent. Fiddle: http://jsfiddle.net/eR8Ye/2/

There's no way to make it transparent.

Mooseman
  • 18,763
  • 14
  • 70
  • 93
  • 1
    While this does work, you're restricted to instances where you know the background colour of your parent. –  Jun 30 '13 at 16:30
  • True, but it is a limitation of `:after`. CSS variables could be used, but I wouldn't rely on them now. – Mooseman Jun 30 '13 at 16:31
  • @user270014 There's not any way to use only CSS for this. Neither `background:transparent` or `background:inherit` works. – Mooseman Jun 30 '13 at 16:33
0

You can get the desired result in 3 steps.

1 - remove the background from the ::after
2 - change the positioning of the ::after to -10px
3 - remove 10px of right padding from the tag class

Edit

With regard to the gradient aspect of your question, it may be worth you updating your Fiddle to show us exactly the issues you are having. This question here may hold the answer you need.

Community
  • 1
  • 1
PTD
  • 1,028
  • 1
  • 16
  • 23
  • Tom's answer doesn't match the padding on his design. Mine does. – PTD Jun 30 '13 at 17:31
  • thanks..it shows border of this arrow in Firefox but not in Chrome. how can I remove this border from Firefox also? – user270014 Jun 30 '13 at 17:37
  • I'm not sure what you mean. I've just had a look in Chrome, Firefox and IE and they look identical to me. – PTD Jun 30 '13 at 17:42
  • right side of this tag has a border of different color in Firefox but not in Chrome. – user270014 Jun 30 '13 at 17:49
  • Having had a play around with the Fiddle I would say that CSS border-image may be your best bet for what you are trying to achieve. It isn't currently supported in IE though. – PTD Jun 30 '13 at 18:22