2

誰かが私が抱えているCSSの問題を解決できるかどうか疑問に思っています..このjsbinを参照してください： http://jsbin.com/uviyat/2/edit

「長い言い回しの例」に注意してください – 三角形の矢印インジケータを垂直方向にスケーリングして、選択した青い領域の高さを動的に埋めるにはどうすればよいですか? (三角形は、最後の css ルールで生成されます..)

私は困惑しています！誰かアイデアはありますか？

前もって感謝します..

編集- Zoltans の回答以来、私はここで Jquery を試してみました: http://jsbin.com/uviyat/12/edit それが最善の方法であるかどうかわかりませんか? 「16」という値はどこから来たのですか?

4

2 に答える 2

5

三角形を自動ストレッチすることはできません。あなたが望むものを達成する最も簡単な方法は、おそらく、背の高いメニュー項目用の小さなサブクラスを定義することです - http://jsbin.com/uviyat/3/edit

<li class="selected tall"><a href="#">Longer  Wording Example</a></li>

<style>
.filters .selected.tall:after {
  margin-top: -36px;
  border-width: 20px 0 20px 7px;
}
</style>

...

アップデート

background-size: coverまたは、:after疑似要素で CSS3 を使用することもできます。ただし、その場合、三角形の画像を作成して背景として設定する必要があります。ここに デモがあります

li {
    width: 100px;
    border: 1px solid #eee;
    margin: 3px;
    position: relative;
}

li:after {
    content: ' ';
    display: block;
    position: absolute;
    right: -20px;
    width: 20px;
    top: 0;
    bottom: 0;
    background: url(http://lorempixel.com/20/20) no-repeat;
    background-size: cover;
}
于 2012-08-14T23:18:31.400 に答える
2

http://jsbin.com/hefavo/1/edit

ねえ、似たようなことをしようとして、この質問に出くわしました。私の解決策をチェックしてください。矢印の角度を変更できないため（境界線の幅をパーセンテージにすることはできません）、矢印が常に特定の距離だけ突き出ているため、完全ではありません。

たとえば、3 行の高さを試してみると、奇妙に見えます。ただし、それを調整するには、前後の疑似要素の「margin-left」を 15px に設定するだけです。

仕組み: 各 li 要素には、500 x 1000 まで拡張される css 三角形としての矢印の下半分である before 疑似要素があります。after 疑似要素は上半分です。次に、三角形はメニュー項目の右側 (正確には下を参照) に配置され、margin-left の設定でどれだけ突き出ているかを制御します。

.filters .selected:before {
  position:absolute;
  height: 0;
  top: 50%;
  // transform:scaleY(-1);
  max-width: 300%;
  border-right: 500px solid #3aa5de;
  border-bottom: 1000px solid transparent;
  content: "";
  left: 50%;
  border-radius:0;
  margin-left: 10px;
  transform: scaleX(-1) translateX(100%);
}

.filters .selected:after {
  position:absolute;
  height: 0;
  top: 50%;
  transform:scaleY(-1) scaleX(-1) translateY(100%)     translateX(100%);
  max-width: 300%;
  border-radius:0;
  border-right: 500px solid #3aa5de;
  border-bottom: 1000px solid transparent;
  content: "";
  left: 50%;
  margin-left: 10px;
}

li 要素自体は、不要な三角形の部分をマスクするために使用されます。三角形が前の「100%」からはみ出しているので、li 要素の幅を 200% に設定し、疑似要素の位置を 50% に設定し、a 要素 (メニュー項目) を 50% の幅に設定します。

.filters li{
  overflow:hidden;
  width: 200%;
  position:relative;
}
.filters li a{
  width:50%;
  position:relative;
  z-index: 1;
}

編集: css の関連ビットに追加

于 2014-08-22T20:21:26.333 に答える