html形状圆形,html – 使用CSS的圆形标记形状

我试图用html / css创建这个形状：

我的要求是：

>身体背景可能会在每页更改,因此无法使用Alpha遮罩图像

>背景颜色在悬停时可以转换

>形状的所有角都是圆形的

有了尖角,你可以用css三角形来做,但圆角的那些给我带来麻烦.

到目前为止我在HTML中有什么：

• Lorem
• Ipsum
• Longer text in tag
• Dolor

在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;

}

它只在Chrome上看起来不错.对于其他人来说,三角形位置存在差异,或者在三角形和实际标签的不同时间发生过渡.见例http://jsfiddle.net/hfjMk/1/

这甚至可行/可行吗？或者我是否必须放弃过渡并使用图像作为三角形部分？