リボンを引き上げる効果を実現する純粋な CSS

hover アクションを使用して p の margin-top を変更して、小さなモジュールを上に移動させ、同時に 2 つのエッジを配置します小さなモジュールのお尻の下にペアを配置 コーナーラインを2色の正方形に分割し、相対的に小さなモジュールを絶対的に配置することで、シンプルな立体的な立ち上がり効果を生み出します。 hover动作改变p的margin-top可以使小模块向上走，同时在小模块的屁股下面放两个沿对角线分成两种颜色的正方形，相对小模块绝对定位，便可以制造出简单的立体上扬效果。
丝带的两头和上扬的阴影部分用border实现就可以了。

---

不过有一个细节需要注意：
如果是导航条的话，p里放a标签，a标签里还要再放span标签；我之前也觉得多此一举，结果证明这个span是大有用处的。
因为a必须要比span高，然后overflow:hidden，才能把魔术不该露出来的部分遮住，该露出来的部分留有余地。
然后span和p:before和p:after需要设置margin-top为正，margin-top的值正好等于a比span高出来的值。
hover动作的时候再设置margin-top:0px;，屁颠屁颠往上走。
那你说，我span和p:before和p:after都不设置margin-top，hover动作的时候再设置margin-top为负，数值等于a比span高出来的值，可不可以呢？
不可以！

第一种情况，a多出来的部分是往上走的，魔术才能成功；
钻牛角尖的情况呢，a border を使用して、リボンの両端と立ち上がる影の部分を実現します。

---

ただし、注意が必要な点が 1 つあります。 ナビゲーション バーの場合は、p 内と、 a タグ span タグも置く必要があります。以前は不要だと思っていましたが、この span タグが非常に便利であることがわかりました。 なぜなら、a は span よりも大きくなければならず、その場合、overflow:hidden は公開すべきでないマジックの部分をカバーできますが、公開すべきです。露出する部分には余裕があります。

次に、span と p:before と p:after は margin-top を正の値に設定する必要があります。 > margin-top の値は、span より大きい <code>a の値とまったく同じです。

hover アクション中に、上に移動するように margin-top:0px; を設定します。

そして、私の span、p:before、p:after は margin-top を設定していないと言います。 hover アクション中に、margin-top を負に設定します。値は spana の値と等しくなります。 /コード> 可能でしょうか？

いいえ！

最初のケースでは、a の余分な部分 は上昇する場合にのみ魔法が成功します。極端な状況では、a の余分な部分が下降すると、それは失われます。

事実は、他人を利用するのが好きな女の子が最も人気があることを証明しています、そうです！ hover动作改变p的margin-top可以使小模块向上走，同时在小模块的屁股下面放两个沿对角线分成两种颜色的正方形，相对小模块绝对定位，便可以制造出简单的立体上扬效果。
丝带的两头和上扬的阴影部分用border实现就可以了。

---

不过有一个细节需要注意：
如果是导航条的话，p里放a标签，a标签里还要再放span标签；我之前也觉得多此一举，结果证明这个span是大有用处的。
因为a必须要比span高，然后overflow:hidden，才能把魔术不该露出来的部分遮住，该露出来的部分留有余地。
然后span和p:before和p:after需要设置margin-top为正，margin-top的值正好等于a比span高出来的值。
hover动作的时候再设置margin-top:0px;，屁颠屁颠往上走。
那你说，我span和p:before和p:after都不设置margin-top，hover动作的时候再设置margin-top为负，数值等于a比span高出来的值，可不可以呢？
不可以！

第一种情况，a多出来的部分是往上走的，魔术才能成功；
钻牛角尖的情况呢，a

htmlコード:

<p>
    <a href="#"><span>青龙</span></a>
    <a href="#"><span>白虎</span></a>
    <a href="#"><span>玄武</span></a>
    <a href="#"><span>朱雀</span></a>
</p>

cssコード:

p{
    width:500px;
    margin:200px auto 0px;
}
p:before{
    content:"";
    border:25px solid;
    border-color:#ccc #ccc #ccc transparent;
    margin-top:10px;
    float:left;
}
p:after{
    content:"";
    border:25px solid;
    border-color:#ccc transparent #ccc #ccc;
    margin-top:10px;
    float:left;
}
p span{
    display:inline-block;
    width:100px;
    line-height:50px;
    margin-top:10px;
    text-align:center;
    background:#ccc;
    position:relative;
    transition: background-color 0.5s, margin-top 0.3s;
}
p a{
    color:#000;
    text-decoration:none;
    height:60px;
    overflow:hidden;
    float:left;
}
p span:before{
    content:"";
    border-right:10px solid #000;
    border-bottom:10px solid #ccc;
    position:absolute;
    top:50px;
    left:0px;
}
p span:after{
    content:"";
    border-left:10px solid #000;
    border-bottom:10px solid #ccc;
    position:absolute;
    top:50px;
    right:0px;
}
p a:hover span{
    margin-top:0px;
    background:#0cf;
}

                                     

🎜🎜hover アクションを使用して p の margin-top を変更すると、小さなモジュールが上に表示され、その下に配置されるようになります。対角線に沿って 2 つの色に分割され、小さなモジュールに対して絶対的に配置された 2 つの正方形は、単純な 3 次元の立ち上がり効果を作成できます。 🎜 border を使用して、リボンの両端と立ち上がる影の部分を実現します。 🎜

---

🎜ただし、注意が必要な点が 1 つあります。🎜 ナビゲーション バーの場合は、p 内と、 a タグ span タグも置く必要があります。以前は不要だと思っていましたが、この span タグが非常に便利であることがわかりました。 🎜なぜなら、a は span よりも大きくなければならず、その場合、overflow:hidden は公開すべきでないマジックの部分をカバーできますが、公開すべきです。露出する部分には余裕があります。 🎜次に、span と p:before と p:after は margin-top を正の値に設定する必要があります。 > margin-top の値は、span より大きい <code>a の値とまったく同じです。 🎜 hover アクション中に、上に移動するように margin-top:0px; を設定します。 🎜そして、あなたは、span にも p:before にも p:after にも margin-top を設定していないと言います。 >。hover アクション中に、margin-top を負に設定します。値は より大きい <code>a の値と等しくなります。スパンコード>は可能でしょうか？ 🎜いいえ！ 🎜🎜🎜🎜🎜最初のケースでは、a は上昇する場合にのみ魔法が成功します。極端な状況では、a の余分な部分が下降すると、それは失われます。 🎜事実は、他人を利用するのが好きな女の子が最も人気があることを証明しています、そうです！ 🎜🎜🎜🎜htmlコード: 🎜

<p>
    <a href="#"><span>青龙</span></a>
    <a href="#"><span>白虎</span></a>
    <a href="#"><span>玄武</span></a>
    <a href="#"><span>朱雀</span></a>
</p>

🎜cssコード: 🎜

p{
    width:500px;
    margin:200px auto 0px;
}
p:before{
    content:"";
    border:25px solid;
    border-color:#ccc #ccc #ccc transparent;
    margin-top:10px;
    float:left;
}
p:after{
    content:"";
    border:25px solid;
    border-color:#ccc transparent #ccc #ccc;
    margin-top:10px;
    float:left;
}
p span{
    display:inline-block;
    width:100px;
    line-height:50px;
    margin-top:10px;
    text-align:center;
    background:#ccc;
    position:relative;
    transition: background-color 0.5s, margin-top 0.3s;
}
p a{
    color:#000;
    text-decoration:none;
    height:60px;
    overflow:hidden;
    float:left;
}
p span:before{
    content:"";
    border-right:10px solid #000;
    border-bottom:10px solid #ccc;
    position:absolute;
    top:50px;
    left:0px;
}
p span:after{
    content:"";
    border-left:10px solid #000;
    border-bottom:10px solid #ccc;
    position:absolute;
    top:50px;
    right:0px;
}
p a:hover span{
    margin-top:0px;
    background:#0cf;
}

🎜🎜

より純粋な CSS でリボンを上げる効果を実現するには、PHP 中国語 Web サイトの関連記事に注目してください。