Make an arrow shape with responsive width and only CSS

border, css, responsive-design

Solution

Here is another posibility.

This one does the trick with gradient backgrounds. You need 2 of them, so that the diagonal is easily achieved:

Relevant CSS:

.metric:before, .metric:after {
    position: absolute;
    top: -25px;
    content: '';
    width: 50%;
    height: 25px;
}
.metric:before {
    left: 0px;
    background: linear-gradient(to right bottom, transparent 50%, lawngreen 50%);
}
.metric:after {
    right: 0px;
    background: linear-gradient(to left bottom, transparent 50%, lawngreen 50%);
}

Updated Fiddle

The differences with Simple As Could Be solution:

Pro Transparent corners (relevant if you have a background)

Con Worse browser support

Problem

I'm trying to make a container that has an upward arrow attached to it. I am familiar with the border drawing trick and think that's a likely solution, but it only works for known sizes I think, since you have to specify border in em or px. The shape I would like to make is this: ``` . / \ / \ / \ | flex | | | ``` Where the content area can flex to different sizes as a percentage of a parent container. Here is the CSS, with the problem area flagged: ``` .metric { display: inline-block; position: relative; height: 150px; width: 50%; background: lawngreen; } .metric:after { position: absolute; top: -25px; left: 0; content: ''; background: white; width: 100%; height: 0; border: 75px solid white; /* this fixed width is the problem */ border-top: none; border-bottom: 25px solid lawngreen; box-sizing: border-box; } ``` Here is the jsfiddle: http://jsfiddle.net/C8XJW/2/ Do you guys know any way to pull this off?

Original source

Related problems