Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rounded tag shape with CSS

I am trying to create this shape with html/css:

enter image description here

My requirements are:

  • body background might change per page, so cannot use alpha masking images
  • the background color is transitionable on hover
  • all corners of the shape are rounded

With sharp corners you could do it with css triangles, but the rounded ones give me trouble.

What I have so far in HTML:

<ul class="tags">
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a></li>
  <li><a href="#">Longer text in tag</a></li>
  <li><a href="#">Dolor</a></li>
</ul>

In CSS:

.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;
}

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 http://jsfiddle.net/hfjMk/1/

Is this even possible/feasible? Or do I have to discard the transition and use an image for the triangle part?

like image 526
bliw Avatar asked Oct 01 '13 09:10

bliw


People also ask

How do I show rounded images in CSS?

Just add the border-radius:50%; to circular_image Class.

How do I make rounded corners in CSS?

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.


1 Answers

You could use a rotated pseudo element for this:

div {
  height: 50px;
  width: 150px;
  border-radius: 10px 0 0 10px;
  position: relative;
  background: tomato;
  text-align:center;
  line-height:50px;
}
div:before {
  content: "";
  position: absolute;
  top: -4px;
  right: -41px;
  height: 41px;
  width: 41px;
  transform-origin: top left;
  transform: rotate(45deg);
  background: tomato;
  border-radius: 10px;
}
<div>Text</div>
like image 117
jbutler483 Avatar answered Nov 15 '22 06:11

jbutler483