5

私はhtml/cssでこの形状を作成しようとしています:

ここに画像の説明を入力

私の要件は次のとおりです。

  • 本文の背景はページごとに変わる可能性があるため、アルファ マスキング画像は使用できません
  • 背景色はホバー時に遷移可能です
  • 形状のすべての角が丸くなっている

鋭い角の場合は 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/

これは可能/実行可能ですか? または、トランジションを破棄して、三角形の部分に画像を使用する必要がありますか?

4

2 に答える 2

0

現時点での最良のオプションは、ほとんどのブラウザーでまったく問題ないように見えるため、手持ちのものを使用することです。さらに、ブラウザー スニファー (非常に危険) を使用して、クロスブラウザー ボタンのテキストの位置を修正することをお勧めします。

もちろん、画像を使用するオプションがあります。基本的には、背景の代わりに形状が透明になります。

その場合、A タグの背景を必要に応じて変更できます。画像の色をページ レイアウトの残りの部分と一致するように設定するだけです。

今思いつくのはこれだけですが、少しでもお役に立てれば幸いです。

于 2013-10-22T16:50:32.573 に答える