Не фиксированная высота рамок на css

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30"> 
  <polygon points="0 0, 100 0, 80 15, 100 30, 0 30" fill="#111" fill-opacity="0.84"></polygon> 
</svg>

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.div { 
  margin-bottom: 10px; 
  padding: 10px 15% 10px 10px; 
  color: #fff; 
  background: rgba(17, 17, 17, 0.84); 
  -webkit-clip-path: polygon(100% 0, 85% 50%, 100% 100%, 0 100%, 0 0); 
  clip-path: polygon(100% 0, 85% 50%, 100% 100%, 0 100%, 0 0); 
  -webkit-clip-path: url("#clipPath"); 
  clip-path: url("#clipPath"); 
}

<div class="div"> 
  Чтобы рамки были в процентах от блока. 
</div> 
 
<div class="div"> 
  Дело в том, что сейчас его высота получается фиксированная из-за высоты рамок и зависит от рамок, а вообще блок сам при уменьшении экрана будет пропорционально уменьшаться, но с высотой рамок не получится этого добиться. Как-то можно это исправить? Чтобы 
  рамки были в процентах от блока. 
</div> 
<svg width="0" height="0"> 
    <defs> 
        <clipPath id="clipPath" clipPathUnits="objectBoundingBox"> 
            <polygon points="1 0, 0.85 0.5, 1 1, 0 1, 0 0" /> 
        </clipPath> 
    </defs> 
</svg>

div { 
  position: relative; 
  background-color: rgba(17, 17, 17, 0.84); 
  /* ширина стрелки 50px, смещаемся на такую величину */ 
  margin-right: 50px; 
 
  /* для вертикального центрирования текста */ 
  display: flex; 
  align-items: center; 
   
  /* Стили просто для демонстрации */ 
  padding: 10px; 
  color: #fff; 
  font-size: 1.5em; 
  height: 200px; 
} 
 
/* псевдоэлементы имитруют половинки "стрелки" */ 
div:before, 
div:after { 
  content: ""; 
  position: absolute; 
  left: 100%; 
  top: 0; 
  /* ширина стрелки 50px */ 
  width: 50px; 
  height: 50%; 
  background: linear-gradient(to left top, transparent 50%, rgba(17, 17, 17, 0.84) 50%); 
} 
 
div:after { 
  /* Перевернуть и опустить вниз вторую половинку */ 
  transform: scaleY(-1); 
  top: 50%; 
}

<div>Здесь будет некоторый текст</div>

div { 
  position: relative; 
  background-color: rgba(17, 17, 17, 0.84); 
  /* ширина стрелки 50px, смещаемся на такую величину */ 
  margin-right: 20%; 
 
  /* для вертикального центрирования текста */ 
  display: flex; 
  align-items: center; 
   
  /* Стили просто для демонстрации */ 
  padding: 10px; 
  color: #fff; 
  font-size: 1.5em; 
  height: 200px; 
} 
 
/* псевдоэлементы имитруют половинки "стрелки" */ 
div:before, 
div:after { 
  content: ""; 
  position: absolute; 
  left: 100%; 
  top: 0; 
  /* ширина стрелки 50px */ 
  width: 25%; 
  height: 50%; 
  background: linear-gradient(to left top, transparent 50%, rgba(17, 17, 17, 0.84) 50%); 
} 
 
div:after { 
  /* Перевернуть и опустить вниз вторую половинку */ 
  transform: scaleY(-1); 
  top: 50%; 
}

<div>Здесь будет некоторый текст</div>