3

私のタイトルが最高ではないことはわかっていますが、できる限り最善を尽くしました。私の問題を説明するのは少し難しいですが、私が望むのは、アクティブな要素に「三角形」を持つ水平リストを作成することです。以下に画像を示します。 例

CSSでこれは可能ですか？jQuery の使用方法はわかっていますが、今は CSS を使用し、jQuery/Javascript は使用したくありません。

私は実際に以下へのリンクを見つけることができるフィドルを作成しました:
http://jsfiddle.net/jackbillstrom/3dNcj/

javacript ソリューションを試しましたが、代わりに CSS を使用したいので満足できませんでした。私の目標は、例でわかるように、その三角形を<li>クリックして「緩和」することです。これは可能ですか、それとも私は夢を見ていますか?

4

4 に答える 4

1

Asadの純粋な CSS ソリューションは本当に優れています。水平リストを作成する同様のことを行いました（あなたが言及しました）。

http://jsfiddle.net/teAPW/

ul, li {
    list-style:none;
    margin:0;
    padding:0;
}
li {
    display:inline-block;
    width:100px;
    height:100px;
    border:1px solid #AAA;
    border-left:none;
    text-align:center;
    line-height:100px;
    background:#DDD;
    color:#999;
    position:relative;
}
ul > li:first-child { border-left:1px solid #AAA; }
ul > li.active { border-right:none; }
ul > li.active + li { margin-left:10px; border-left:1px solid #AAA }
ul > li.active:after {
    position:absolute;
    top:40px;
    right:0;
    border:13px solid;
    border-color:transparent #FFF transparent transparent;
    content:"";
}
于 2013-06-26T18:08:31.833 に答える