1

次のようにスタイル設定するメニュー項目があります。

ここに画像の説明を入力してください

：after pesudo-classで達成している最後の矢印：

.ride-type-menu:after{
        content:"";
        border: 13px solid;
        border-color:  transparent #DBD7D7;
        border-right-color: transparent;
        right: -26px;
        top: 0;
        position: absolute;
        display: block;
    }

私が抱えている問題は、これらのメニュー項目が複数の行にまたがっている場合です。

ここに画像の説明を入力してください

メニュー項目が次のようなことを実現するために必要な行数に基づいて、矢印の高さ（幅を維持）を自動的に増やす（必要に応じて画像を使用する）方法を誰かが考えることができますか？

ここに画像の説明を入力してください

4

2 に答える 2

2

わかった！ハッキーな解決策がやってくる！

メニュー項目に回転した正方形の要素を追加することで、JSでそれを行うことができます。対角線の長さがメニュー項目の高さと等しくなるように、サイズを計算する必要があります。また、その上隅がメニュー項目の上端になるように、その位置を設定する必要があります（CSSで静的に行うことができます）。

これがデモです：http：//jsbin.com/oxaxet/2/edit

これに関する明らかな問題は、回転した要素の「幅」が親要素の高さとともに大きくなることです。これに対処するために、変換を使用してハックをさらに修正できる可能性があると思いますskewが、この部分的な修正は、現時点で処理できるすべての数学です。後でもう一度突くと、答えを編集します。

1）CSSはプログラムではないため、サイズを計算できないため、2）JSは疑似要素*に触れることができないため、サイズを計算すると適用できないため、疑似要素でやりたいことができないと思います。彼ら。

私が純粋なCSS（疑似要素を操作する）に最も近いのは、親と同じ高さを取得するためにを使用top: 0してbottom: 0（または同様に機能するheight: 100%）ことでしたが、その後、親の高さに基づいて値を設定する方法はありません。そのため、親が成長するにつれて、矢印の先端が切断されます。:afterborder-width

* iircの両方の制限にはあいまいな回避策がありますが、私が覚えているほどしっかりしているようには見えませんでした。これらの方向でさらにハックできると思われる場合は、「サイズCSSの計算」または「javascript疑似要素」を自分で検索できます。

于 2012-10-11T00:48:43.410 に答える
2

これを行う方法の1つのアイデアは、li背景にSVG画像を使用し、CSSbackground-sizeプロパティを使用してサイズを変更することです。これはIE9、Firefox、Safari、Chromeで機能しますが、Operaでは少しファンキーに見えます（おそらく修正がありますか？）。

まず、SVG XMLが必要です。以下を新しいテキストファイルに保存し、「right-arrow.svg」として保存します。

SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="152.18813"
   height="175.7317"
   id="svg2"
   preserveAspectRatio="none">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(-37.842052,-201.63918)"
     id="layer1">
    <path
   d="m 37.842053,377.37089 -10e-7,-87.86586 0,-87.86585 76.094068,43.93293     76.09405,43.93293 -76.09406,43.93292 z"
       id="path2987"
       style="fill:#00f0ff;fill-opacity:1;stroke:none" />
  </g>
</svg>

次に、これを使用します。

HTML

<ul>
    <li>first</li>
    <li>first<br>second<br>third</li>
    <li>first<br>second</li>
</ul>

CSS

ul { margin: 0; padding: 0; list-style-type: none; }

li {
    margin-bottom: 5px;
    position:relative;
    width: 200px;
    background: url('right-arrow.svg') right center no-repeat;
    background-size: 15px 100%;
    padding: 15px;
}

li:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 215px; /* (li width + padding) - background-size width */
    height: 100%;
    background-color: #00f0ff;
    z-index: -1;
}

少しずさんですが、必要に応じてこれを改良することができます。アイデアはそこにあります。

于 2012-10-11T00:50:34.330 に答える