css - CSS3メニューの境界線-RightArrow効果

Question

css3を使用して右矢印効果を実現したいのですが、すでに何度も試しましたが、うまくいきませんでした。

http://jsfiddle.net/ffCDw/

.menu li {
list-style-type: none;
display:inline;

}
.menu li a {
padding: 0 20px;
background: green;
color: #fff;
}

Answer 1

私は同じ問題を抱えていましたが、境界線を使用したアプローチは、特に :hover...

HTML

div 内にスパンを配置しました。これは矢印専用です。

<div class="arrow">
    I am the first arrow
    <span></span>
<div>

CSS

span get's position:absolute;

ここでは、span:after が配置されて変換されているため (-45 度)、右を指しています。

そして最後に、span overflow:hidden を配置することで、右を指す部分だけが表示されたままになります...

span {
    content: "";
    position: absolute;
    top: 0;
    right: -1.625em;
    width: 2em;
    height: 2.5em;
    overflow: hidden;
    z-index: 10;
}
span:after {
    content: "";
    position: absolute;
    top: -3px;
    left: -1em;
    width: 2em;
    height: 2.5em;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border: 1px solid #777;
    background: #60bee7;
}

これが理解できることを願っています。あとは、 divとspan:afterのスタイルを設定し、必要に応じてこれらの要素に :hover 状態を定義するだけです。

スパンに背景色を指定しないでください

そして、ここに実際の例があります：

http://jsfiddle.net/marczking/PyKFT/

Answer 2

これらの要素の右端に矢印を追加する場合:

更新されたフィドル

CSS を使用して、このブロックでアンカー タグの後に三角形要素を追加しています。

.menu li a:after{
    height:0;
    width: 0;
    top: 0;
    left: 100%;
    position:absolute;
    content: ' ';
    border-left: solid 5px green;
    border-top: solid 9px transparent;
    border-bottom: solid 9px transparent;
}

li次に、要素が占める追加のスペースを考慮して、要素の左マージンを増やします。プロパティのピクセル サイズを大きくすることで三角形の長さを調整できますが、それに応じborder-leftて のマージンを大きくしてliください。