2

http://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/から CSS Clip Path を試していますが、この非常識なバグがあります。一言で言えば、コードは CodePen と JSFiddle の両方で機能しますが、私のローカル/アプリでは機能しません。

これが、私が考え出そうとしていたポリゴンのコードです。まず CSS:

nav {
    position: fixed;
    bottom: 0;
    background: #BE0F16;
    color: #fff;
    width: 100%;
    padding: 2rem 1rem;
    text-align: right;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50%);
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50%);
    -webkit-clip-path: url("#clip-shape");
    clip-path: url("#clip-shape");
}
nav .next-chapter {
    color: #fff;
    padding-left: 1rem;
}

関連する HTML は次のとおりです。

<!DOCTYPE html>
<html>

<head>
    <title>Something</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link href="css.css" rel="stylesheet" />
</head>

<body>
    <nav>
        <a class="menu"><i title="Menu" class="fa fa-bars"></i><h1 class="visuallyhidden">Menu</h1></a>
        <a class="next-chapter" href="/<%=next%>"><i title="Next Chapter" class="fa fa-hand-o-right"></i><span class="visuallyhidden">Next Chapter</span></a>
        <a id="comment" href="http://twitter.com/?status=@uebyn"></a>
    </nav>
    <svg width="0" height="0">
        <defs>
            <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
                <polygon points="0 0, 0 1, 1 1, 1 .5" />
            </clipPath>
        </defs>
    </svg>
    <script src="script.js"></script>
</body>

</html>

index.html (上記の HTML) を開くと、予想していた多角形ではなく四角形が表示されます。それでも、記事に記載されているとおり、正確な指示に従いました。

次に、コードを CodePen ( http://codepen.io/anon/pen/JdwrQw ) と JSFiddle ( http://jsfiddle.net/yk95wxmL/ ) に同じブラウザーでコピーすると、動作します。

私は一生これを理解することはできません。Firefox は CodePen と JSFiddle の同じコードの css クリップ パスを理解して実行しますが、HTML では実行しませんか? 確かに、HTML 全体を Codepen にコピーしたところ、css クリップ パスが機能しました。これは私を完全に超えています。誰かがおそらく明白な提案を思い付くことができれば、私はどういうわけかそれを見逃しました.私は非常に感謝しています.

4

2 に答える 2