Offshape Arrow - 响应？

Question

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

作为某些盒子的基线。

我想将它用作响应式箭头（目前它是一个.png）有没有办法在纯CSS中制作它，甚至使用jQuery并使其响应？我想我可能不得不把它分成单独的跨度来创造效果？

提前致谢。

Answer 1

看看CSS3 Shapes。您可以使用它们在CSS中创建三角形，例如：

#triangle-down {
    width: 0;
    height: 0;
    border-left: 320px solid transparent;
    border-right: 320px solid transparent;
    border-top: 200px solid red;
}

您可以更改边框大小以获得您所追求的三角形。

要使其响应，您可以使用media queries，例如：

@media all and (max-width : 800px) {
    #triangle-down {
        width: 0;
        height: 0;
        border-left: 160px solid transparent;
        border-right: 160px solid transparent;
        border-top: 100px solid blue;
    }
}

DEMO ：http://jsfiddle.net/VY7vh/6/

Answer 2

响应，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