小编bli*_*liw的帖子

我试图用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: …