带有 CSS 的圆角标签形状答案

【问题标题】：Rounded tag shape with CSS带有 CSS 的圆角标签形状
【发布时间】：2013-10-07 08:47:08
【问题描述】：

我正在尝试用 html/css 创建这个形状：

我的要求是：

正文背景可能会因页面而异，因此不能使用 alpha 遮罩图像
悬停时背景颜色可转换
形状的所有角都是圆形的

如果有尖角，你可以用 css 三角形来做，但圆角给我带来麻烦。

到目前为止我在 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>

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

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

【问题讨论】：

我真的看不出 Chrome 和其他的有多大区别。编辑：哦，歌剧。哦，好吧。
我觉得这可能比尝试使用纯 CSS 在所有浏览器、移动设备等中看起来都不错的做法更麻烦。我可能会考虑使用一个图像系统，它允许您拥有始终看起来很棒的自动扩展标签。

标签： html css shapes css-shapes

【解决方案1】：

目前最好的选择是使用现有的，因为这在大多数浏览器中看起来都不错。此外，我建议您可以使用浏览器嗅探器（非常危险）来修复跨浏览器按钮中的文本定位。

可以选择使用源图像，其中基本上形状是透明的，而不是背景。

在这种情况下，您可以根据需要更改 A 标签的背景，只需将图像颜色设置为与页面布局的其余部分匹配。

这是我目前唯一能想到的，希望对你有点用处。

【讨论】：

【解决方案2】：

您可以为此使用旋转的伪元素：

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

&lt;div&gt;Text&lt;/div&gt;

【讨论】：