带有CSS的圆形标签形状

时间:2013-10-01 09:00:04

标签: html css shapes css-shapes

我正在尝试使用html / css创建此形状:

enter image description here

我的要求是:

  • 正文背景可能会每页更改,因此无法使用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/

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

2 个答案:

答案 0 :(得分:5)

您可以使用旋转的伪元素:

&#13;
&#13;
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;
}
&#13;
<div>Text</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

目前你最好的选择就是使用你拥有的东西,因为在大多数浏览器中它看起来都很不错。此外,我建议您可以使用浏览器嗅探器(非常危险)来修复跨浏览器按钮中的文本定位。

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

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

这是我现在唯一能想到的,希望它对你有用。