Clip-path: polygon () не поддерживается в Firefox? - PullRequest
0 голосов
/ 18 февраля 2020

Я использую путь обрезки (см. CSS ниже), чтобы создать эффект разорванного края для поля заголовка, однако он не работает с Firefox. Я проверил поддержку на MDN и Могу ли я использовать , и похоже, что она должна поддерживаться. Любая помощь с этим была бы удивительной.

.form-html-textured-bottom:before {
  content: "";
  height: 5px;
  width: 110%;
  position: relative;
  background-color: red;
  margin-top: 0;
  display: block;
  clip-path: polygon(0% 0%, 25% 34%, 50% 50%, 100% 0%);
  -webkit-clip-path: polygon(0% 0%, 25% 34%, 50% 50%, 100% 0%);
}

.form-html-textured-bottom-container:after {
  content: "";
  height: 5px;
  position: relative;
  background-color: red;
  margin-top: 0px;
  display: block;
  clip-path: polygon(0% 0%, 25% 34%, 50% 50%, 100% 0%);
  -webkit-clip-path: polygon(0% 0%, 25% 34%, 50% 50%, 100% 0%);
}
<div class="form-html-textured-bottom-container">
  <div class="form-html-textured-bottom">
    <h3>Here's a heading</h3>
    <p class="form-html-textured-bottom-text">Here are words</p>
  </div>
</div>
...