Клип-путь не работает для Firefox, IE или Edge

Я использую карусель для отображения изображений с некоторым контентом. Для показа изображения я использую клип. Он отлично проявляется в Chrome, но он не работает в IE, Edge или Firefox.

.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

body {
  background-image: url('../../Images/Plain-BG.PNG');
  background-size: cover;
  background-repeat: no-repeat;
  font-family: Kamban !important;
}

footer {
  background-image: url(../../Images/DT-Logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  position: absolute;
  right: 10%;
  top: 85%;
  width: 100%;
  padding-top: 5%;
}

.news-img {
  width: 42.5%;
  margin-top: 13%;
  clip-path: polygon(6% 4%, 94% 11%, 94% 91%, 5% 92%);
  margin-left: 8.5%;
}

.title {
  margin: 0px;
  width: 40%;
  position: absolute;
  top: 43%;
  height: auto;
  left: 57%;
  color: #fff;
  word-break: break-word;
}

.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
  height: auto !important;
}

.title p {
  line-height: 1.7em;
  font-size: 2.5em;
  text-align: center;
  word-break: break-word;
}

header {
  background-image: url(../../Images/Mukkiya-Seithigal.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  position: absolute;
  top: 18%;
  right: 4%;
  width: 100%;
  padding-top: 5%;
}

<div class="Maindiv">
  <header></header>
  <article>
    <div id='carousel-container'>
      <div class="carousel slide" data-ride="carousel">
        <div class="wholediv carousel-inner">
        </div>
      </div>
    </div>
  </article>
  <footer></footer>
</div>

Ответы

<svg height="186px" width="300px">
  <defs>
    <pattern id="pattern" height="100%" width="100%" patternUnits="userSpaceOnUse" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
      <image height="1" width="1" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Crossing_the_River_Styx.jpg/300px-Crossing_the_River_Styx.jpg"  preserveAspectRatio="xMidYMid meet"></image>
    </pattern>
  </defs>
  <polygon points="18 7, 282 20, 282 150, 15 171" fill="url(#pattern)"></polygon>
</svg>