title: Rounded tag shape with CSS
body: <p>I am trying to create this shape with html/css:</p>
  
  <p><img src="https://i.stack.imgur.com/O4Ksl.png" alt="enter image description here"></p>
  
  <p>My requirements are: </p>
  
  <ul>
  <li>body background might change per page, so cannot use alpha masking images</li>
  <li>the background color is transitionable on hover</li>
  <li>all corners of the shape are rounded</li>
  </ul>
  
  <p>With sharp corners you could do it with css triangles, but the rounded ones give me trouble.</p>
  
  <p>What I have so far in HTML: </p>
  
  <pre><code>&lt;ul class="tags"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Lorem&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Ipsum&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Longer text in tag&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dolor&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>In CSS:</p>
  
  <pre><code>.tags {
    list-style: none;
    margin: 0;
    padding: 1em;
  }
  .tags li {
      display: inline-block;
      margin-right: 2em;
      position: relative;
  }
  .tags a {
      background: #283c50;
      color: #fff;
      display: block;
      line-height: 1em;
      padding: 0.5em;
      text-decoration: none;
  
      -webkit-border-radius: 10px 0 0 10px;
      -moz-border-radius: 10px 0 0 10px;
      border-radius: 10px 0 0 10px;
  
      -webkit-transition: background 200ms ease;
      -moz-transition: background 200ms ease;
      -o-transition: background 200ms ease;
      -ms-transition: background 200ms ease;
      transition: background 200ms ease;
  }
  .tags a:before {
      background: #283c50;
      content: "";
      height: 1.75em;
      width: 1.75em;
      position: absolute;
      top: 0.1em;
      right: -0.87em;
      z-index: -1;
  
      -webkit-transform: rotate(40deg);
      -moz-transform: rotate(40deg);
      -o-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      transform: rotate(40deg);
  
      -webkit-border-radius: 0.625em;
      -moz-border-radius: 0.625em;
      -o-border-radius: 0.625em;
      -ms-border-radius: 0.625em;
      border-radius: 0.625em;
  
      -webkit-transition: background 200ms ease;
      -moz-transition: background 200ms ease;
      -o-transition: background 200ms ease;
      -ms-transition: background 200ms ease;
      transition: background 200ms ease;
  }
  .tags a:hover,
  .tags a:hover:before {
      background: #1eaa82;
  }
  </code></pre>
  
  <p>It only looks ok on Chrome. For others, there are either differences in the triangle position or transition occurs at different times for the triangle and the actual tag. See example <a href="http://jsfiddle.net/hfjMk/1/" rel="nofollow noreferrer">http://jsfiddle.net/hfjMk/1/</a></p>
  
  <p>Is this even possible/feasible? Or do I have to discard the transition and use an image for the triangle part?</p>