IE11でclip-pathを有効にしたい

コーディング始めたばかりですの初心者です。

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;
}