Offshape Arrow - Responsive?

Question

I am trying to use the following arrow :

promo-arrow

As a baseline for some boxes.

I would like to use it as a responsive arrow (At the moment it is a .png) Is there a way to make this in pure CSS or even use jQuery and make it responsive?. I imagine I may have to split it into seperate spans to create the effect?

Thanks in advance.

Take a look here http://css-tricks.com/examples/ShapesOfCSS/. You can create the triangle in css. — tomsullivan1989, Nov 18 '13 at 15:43
You can be interested with this site: http://apps.eky.hk/css-triangle-generator/ — Setthase, Nov 18 '13 at 15:46
Switch to using SVG instead of PNG. SVG is a vector graphics format which can stretch without going blocky. — Spudley, Nov 18 '13 at 15:49
possible duplicate of [Make an arrow shape with responsive width and only CSS](http://stackoverflow.com/questions/17430445/make-an-arrow-shape-with-responsive-width-and-only-css) — OlivierH, Nov 18 '13 at 15:51

score 3 · Answer 1 · answered Nov 18 '13 at 15:55

Take a look at CSS3 Shapes. You can use them to create the triangle in your CSS, e.g:

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

You can alter the border sizes to achieve the triangle you are after.

To make it responsive you can use media queries, e.g:

@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/

score 1 · Accepted Answer · answered Nov 18 '13 at 16:01

Responsive, 1 div.

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

Offshape Arrow - Responsive?

2 Answers2