コーディング始めたばかりですの初心者です。
clip-pathで形を指定して、swiperで画像を3枚表示させたいと思っています。
クローム、サファリ、firefoxでは問題ないのですが、IE11では、クリップパスが効かず、真四角の画像が表示されてしまいます。
IE11での適応方法を教えてください。
以下HTMLです。
<div class="clip"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="#" alt="sample画像" width="100%" height="auto"> </div> <div class="swiper-slide"> <img src="#" alt="sample画像" width="100%" height="auto"> </div> <div class="swiper-slide"> <img src="h#" alt="sample画像" width="100%" height="auto"> </div> </div><!-- swiper-wrapper --> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div><!-- swiper-container --> </div> </div>
CSS
background-color: black; width: 82%; height: auto; clip-path: polygon(0 0, 100% 0,100% 40%, 84% 40%, 84% 100%, 0 100%, 0 0); -webkit-clip-path: polygon(0 0, 100% 0,100% 40%, 84% 40%, 84% 100%, 0 100%, 0 0); } .slideshow div.clip { width: 100%; height: auto; clip-path: polygon(calc(100% - 4px) 4px, calc(100% - 4px) calc(40% - 4px), calc(84% - 4px) calc(40% - 4px), calc(84% - 4px) calc(100% - 4px), 4px calc(100% - 4px), 4px 4px); -webkit-clip-path: polygon(calc(100% - 4px) 4px, calc(100% - 4px) calc(40% - 4px), calc(84% - 4px) calc(40% - 4px), calc(84% - 4px) calc(100% - 4px), 4px calc(100% - 4px), 4px 4px); } /* Swiper css */ .swiper-container { width: 100%; height: auto; position: absolute; z-index: 0; top: 0px; left: 0px; } .swiper-container img.frameguide{/* frame */ position: absolute; z-index: 2; } .swiper-slide { text-align: center; font-size: 18px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img{ z-index: 1; }