如何删除剪切路径多边形后的空间？

Question

仅在Google Chrome和某些分辨率下会发生这种情况，请查看Sass代码：

$podcast-color: #fff;

$podcast-name-bg-color: #f9dc30;
$podcast-name-color: #1e447f;

$podcast-callout-bg-color: #1e447f;

.podcast {
  color: $podcast-color;
  font-size: .94rem;
  line-height: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;

  &__name {
    color: $podcast-name-color;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 2rem;
    text-align: right;
    text-transform: uppercase;

    &::before {
      background-color: $podcast-name-bg-color;
      content: '';
      height: 2rem;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: -1;
    }
  }

  &__callout {
    display: flex;
    line-height: 3rem;
    margin-top: -1rem;
    padding-left: 2rem;

    &::before,
    &::after {
      background-color: $podcast-callout-bg-color;
      content: '';
      height: 3rem;
      position: absolute;
      z-index: -1;
    }

    &::before {
      // background-image: linear-gradient(to top left, transparent 0%, transparent 50%, $podcast-callout-bg-color 50%, $podcast-callout-bg-color 100%);
      clip-path: polygon(100% 0, 0% 100%, 100% 100%);
      margin-left: -2rem;
      width: 1rem;
    }

    &::after {
      margin-left: -1rem;
      width: 100%;
    }
  }

  &__icon {
    font-size: 1.5rem;
    padding-right: .75rem;
  }

  &__listen {
    margin-right: .5rem;
    opacity: .7;
  }

  &__title {
    font-weight: 450;
  }
}

这是我的HTML（Pug模板）：

.podcast
  .container
    .row
      .col.col--xs-2
        .podcast__name Podcast

      .col.col--xs-10
        .podcast__callout
          .podcast__icon
            i.i.i--podcast
            i.i.i--podcast-x

          .podcast__listen Ouça agora:

          .podcast__title Torne-se um cientista de dados ninja ainda este ano.