bholagabbar bholagabbar - 5 months ago 23
CSS Question

Remove white background from tag shape built in CSS

I've come across and modified an interesting snippet of code that makes links looks like tags. The problem is that the shape is only visible properly when the background is white. The moment I change the background, the shape turns rectangular and spoils the look.

Please have a look at the code snippet and fiddle example for a better understanding.



body {
font: 12px/1.5 'PT Sans', serif;
margin: 25px;
background: blue; /*the moment background is white, it's ok*/
}

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

.tags li {
float: left;
}

.tag {
background: #eee;
border-radius: 3px 0 0 3px;
color: #999;
display: inline-block;
height: 26px;
line-height: 26px;
padding: 0 20px 0 23px;
position: relative;
margin: 0 10px 10px 0;
text-decoration: none;
-webkit-transition: color 0.2s;
}

.tag::before {
background: #fff;
border-radius: 10px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
content: '';
height: 6px;
left: 10px;
position: absolute;
width: 6px;
top: 10px;
}

.tag::after {
background: #fff;
border-bottom: 13px solid transparent;
border-left: 10px solid #eee;
border-top: 13px solid transparent;
content: '';
position: absolute;
right: 0;
top: 0;
}

.tag:hover {
background-color: crimson;
color: white;
}

.tag:hover::after {
border-left-color: crimson;
}

<h2>Example 2</h2>
<ul class="tags">
<li><a href="#" class="tag">HTML</a></li>
<li><a href="#" class="tag">CSS</a></li>
<li><a href="#" class="tag">JavaScript</a></li>
</ul>





In the code above, the moment you change
background
to white in the 4th line of CSS, it works fine.

How do I get this to run on all background colors?

Answer

change css to this:

    body {
      font: 12px/1.5 'PT Sans', serif;
      margin: 25px;
      background: blue; /*the moment background is white, it's ok*/
    }
    
    .tags {
      list-style: none;
      margin: 0;
      overflow: hidden; 
      padding: 0;
    }
    
    .tags li {
      float: left; 
    }
    
    .tag {
      background: #eee;
      border-radius: 3px 0 0 3px;
      color: #999;
      display: inline-block;
      height: 26px;
      line-height: 26px;
      padding: 0 20px 0 23px;
      position: relative;
      margin: 0 20px 10px 0;
      text-decoration: none;
      -webkit-transition: color 0.2s;
    }
    
    .tag::before {
      background: #fff;
      border-radius: 10px;
      box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
      content: '';
      height: 6px;
      left: 10px;
      position: absolute;
      width: 6px;
      top: 10px;
    }
    
    .tag::after {
      background: transparent;
      border-bottom: 13px solid transparent;
      border-left: 10px solid #eee;
      border-top: 13px solid transparent;
      content: '';
      position: absolute;
      right: -10px;
      top: 0;
    }
    
    .tag:hover {
      background-color: crimson;
      color: white;
    }
    
    .tag:hover::after {
       border-left-color: crimson; 
    }
<h2>Example 2</h2>
<ul class="tags">
  <li><a href="#" class="tag">HTML</a></li>
  <li><a href="#" class="tag">CSS</a></li>
  <li><a href="#" class="tag">JavaScript</a></li>
</ul>

Comments