Я использую путь обрезки (см. 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>