html - 变形箭头- react 灵敏？

我正在尝试使用以下箭头：



作为一些盒子的基线。

我想将其用作响应式箭头（目前它是.png）是否有办法在纯CSS中甚至使用jQuery使其具有响应性？我想我可能必须将其分成单独的跨度才能产生效果？

提前致谢。

最佳答案

响应式，1格

的HTML

<div class="triangle"></div>

的CSS

.triangle {
    width: 25%;
    padding: 25% 0 0 25%;
}

.triangle:after {
    content: "";
    display: block;
    width: 0; height: 0;
    margin: -250px 0 0 -250px;
    border-top: 250px solid black;
    border-right: 250px solid transparent;
    border-left: 250px solid transparent;
}

DEMO