FirefoxとIE9のクリップパスの代替例+

Question

私は、CSSクリップパスを使って屋上のようなものを構築しようとしています。 残念ながら私はIEとFirefoxがクリップパスをサポートしていないことに気づきました。 私の質問：IEとFirefoxと互換性のあるポリゴンを構築する良い方法は何ですか？また、これらのポリゴンには影とテキストコンテンツが必要です。誰がこの問題を持っている場合

.roof-left { 
 
\t width: 280px; 
 
\t height: 280px; 
 
\t background: #1e90ff; 
 
\t -webkit-clip-path: polygon(0 54%, 100% 21%, 100% 100%, 0% 100%); 
 
    clip-path: polygon(0 64%, 100% 21%, 100% 100%, 0% 100%); 
 
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); 
 
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); 
 
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); 
 

 
} 
 
.roof-content-left { 
 
    padding-top: 60%; 
 
}

<div class="roof-left"> 
 
    <div class="roof-content-left"> 
 
    Whatever 
 
    </div> 
 
</div>

Answer 1

：：SVGは、一つの可能​​な、ここのボックスシャドウで動作するように答え:) ない可能ですが、SVGである。ここ

は私のクリップパスの例です。インラインシャドウもうまく動作します。

.trap-container { 
 
    position: relative; 
 
    width: auto; 
 
    height: 100%; 
 
} 
 
.trap-container svg { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.trap-content { 
 
    display: inline-block; 
 
    position: relative; 
 
    height: 50%; 
 
    top: 10%; 
 
    width: 80%;; 
 
    bottom: 10%; 
 
    color: black; 
 
    margin-left:15%; 
 
    margin-top: 38%; 
 
    margin-bottom: 10%; 
 
} 
 

<div class="trap-container"> 
 
<svg width="600px" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 164.4 187.2"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.08;mix-blend-mode:exclusion;}.cls-3{fill:#1d1d1b;}.cls-4,.cls-6,.cls-8{fill:none;stroke-miterlimit:10;}.cls-4{stroke:#1d1d1b;}.cls-4,.cls-6{stroke-width:2px;}.cls-5{fill:#f6f6f6;}.cls-6,.cls-8{stroke:#fff;}.cls-7{opacity:0.32;}</style></defs><title>fickwurst</title><g class="cls-1"><g id="Ebene_1" data-name="Ebene 1"><g class="cls-2"><path class="cls-3" d="M347,312.38" transform="translate(-151.79 -164.7)"/><path class="cls-4" d="M347,312.38" transform="translate(-151.79 -164.7)"/></g><path class="cls-5" d="M347.33,312.67" transform="translate(-151.79 -164.7)"/><path class="cls-6" d="M347.33,312.67" transform="translate(-151.79 -164.7)"/><image class="cls-2" width="685" height="780" transform="scale(0.24)" xlink:href="data:image/png;base64,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AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACACVOf20AAAZjSURBVFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUELQAAVRO0AABUTdACAFA1QQsAQNUOErSvKa4iaAEA2L1NQdv0Z9OhewnaN0TQAgCwG08HbdOZOwnaF63+De9YvKo4Kz6l+NLi9atf9EPFmyJoAQAYp+nJpiubvmw6s+nNpjub/mw6tOnRpkubPn3RkKB9oXiH4n2LDy9+f/HFxT8qvqP43xG0AACM93TQNp3Z9GbTnU1/Nh3a9GjTpU2fDg7alxXvU3xY8UnFFxRfV3xb8T+Lnyx+pvjZR/6CAACwSdORTU++MW1fNp3Z9GbTnU1/Nh3a9GjTpYOD9i2Kty/es/h1xe8uPrf46uKbiv9W/Fjx02mrWtQCADDEz640PfnjxX8vbou/l7Y7m/5sOrTp0aZLmz4dFLQvKd62eEXxK4rfVlwXf634xuK70z7cfWPuohYAAIZoOrJ5bvAjxfcU/6r468VnpO3PpkObHm26tOnTfkG7itpm6eCtinct3r94XdotsOY9wz9IW8/fv/rlP5E2bJu/zE8BAECHN600T1h/NO1/+/+txdenXTj4tOIj03Zo06NNlz64cNAVtM0lWfMA973Tftx7kbaWvyLtnMI3F99b/EDaI7HmIe8PAwBAh6Ybm378weL7im8v/nnaT2c/s/hdxWna97PrhYPBQbt+R/s2xbsVH1B8RNrHuZ9dfGXagv63xbekvUh7w8p3AQDAButmbPqx+VT2PxQ3xVcVfzbtXFfz6ewHFu+e9rnBxvezG4P2gU9p36P4oOKjit+Xtpy/vPhbxdemnVd4fdpPbgEA4DFNNzb92Cwa/N3irxR/Ou1Tg48pfnXaVwLNFyq8NI98OtsVtOvjsLcuXr76Q5uHuU0xf1zx6cVnFX+u+KK0A7hfBgAAHZpubG6zPr/4nOKPpn0J8JvTPnVtvh2seTvbvBZ49NPZR4P2qahdPz1457RRe1L8huKji48tPiHt8G3z8fDVyqcCAMBz1q3YdGPTj5+Y9r1s86nsa4tfmfabwZonr2+XjrezvYJ2FbXN04NmyLaJ2uZj31emreYmbH9N8aHFq9N+NdlrVl4LAADPWbdi043Nt4A1X5zQfCL7wcX7pd2cfZfcxezGqa5BQftU1L5F2smEZti2+bS2eaTbvK1977RfSfaqtKELAACPabqx6cdmxaCJ2FekDdnmdqv5EPWF9IzZ3kG7itr1m9rmF7zV6pc1cfuy1S9vJhXeCQAAOjTd2PRj05FNT75t2r5sPpVtPkRtPkztFbODgvapqH3R6pe8ZPULX1h5SwAA6GndkE1PNl354gwM2a2CdkPcPu3FAADQ4V5HdrXnXoIWAACmoPMHAABgyv4/cJDmRVMvk1UAAAAASUVORK5CYII="/><image class="cls-7" width="670" height="764" transform="translate(2.09 2.27) scale(0.24)" xlink:href="data:image/png;base64,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AMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADKiFEAAMqIUQAAyohRAADK3CRGv7B4b/H+4huPPxQAAFoO7XhoyPfy0JSrYvTdxecWf7r458VXH3/Y1wAA4AyHdjw05KElD015aMtDYzZj9GOLTy1+fvG7iy89/pD38vA1KwAAtLyXh4Y8tOShKQ9teWjMQ2uejNGPLj65+Mzi1xa/l4ea/SIAAKxwaMhDSx6a8tCWh8Y8tObzMfoYpO8sPpGHN/2fWPxcHr5W/Xwe3voBAKDl0I6Hhjy05KEpD215aMx3PuzOF2L01bejhw8f6vXwdeq7jz8AAADOdWjIQ0semvLQlh9+K/pijL4RpO88/guHd/2PAwDABQ4teWjKQ1t+5K3mfClGn0QpAABc5dnWbMUoAABspfkBAADYSvMDAACwlf8HGSUF8s/nf/kAAAAASUVORK5CYII="/><polygon class="cls-5" points="2.87 182.96 2.87 117.3 160.87 2.96 160.87 182.96 2.87 182.96"/><polygon class="cls-8" points="2.87 182.96 2.87 117.3 160.87 2.96 160.87 182.96 2.87 182.96"/></g></g></svg> 
 
    
 
    <div class="trap-content">Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, 
 
    Lorem ipsum dollar si amet. 
 
    </div> 
 
</div>

Answer 2

私はIEのCSSクリップパスの選択肢を探したが、失敗していました。

CSSのクリップパスは非常に便利な機能で、After Effectsと同じ方法でアニメーションを作成できます。しかし、それはIEで全く動作しないというのは本当にイライラしています。

誰でも同じ問題がある場合は、このJSFiddleを確認できます。これらの記事へ

IE Compatible CSS Mask Animated with GSAP

var tlMax = new TimelineMax(); 
 

 

 
function animate(){ 
 

 
console.log("aa"); 
 

 
tlMax 
 
    
 
//I did not find any way to animate svg mask, so I have to deal with img directly 
 
    .to(["#mask_image3"], 0, {scaleX:.001}) 
 
    
 
    
 
    .to(["#mask_image3"], 2, {scale:3,z: 0.1, rotationZ: 0.01}); 
 
} 
 

 
animate();

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> 
 
<div class="svgMask"> 
 
    <svg height="250" width="970" baseProfile="full" version="1.2"> 
 
     <defs> 
 
      <mask id="svgmask3" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)"> 
 
       <image id="mask_image3" width="100%" height="100%" xlink:href="https://preview.ibb.co/dgo09G/mask.png"/> 
 
      </mask> 
 
     </defs> 
 
     <image mask="url(#svgmask3)" width="100%" height="100%" y="0" x="0" xlink:href="http://via.placeholder.com/970x250"/> 
 
    </svg> 
 
</div>

また

感謝： https://www.html5rocks.com/en/tutorials/masking/adobe/ https://thewebstorebyg.wordpress.com/2013/12/29/cross-browser-svg-masking-supports-ie8-ie9-ie10-firefox-chrome/