Create flexible width arrow shape and CSS only

Question

I am trying to create a container with an up arrow attached to it. I am familiar with the drawing trick and consider this a likely solution, but it only works for known sizes, I think, since you need to specify a border in em or px.

The form I would like to do is this:

. / \ / \ / \ | flex | | | 

If the content area can be bent to different sizes as a percentage of the parent container.

Here is the CSS with the problem area marked:

 .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 jsfiddle: http://jsfiddle.net/C8XJW/2/

Do you guys know any way to take this off?

Answer 1

Here is another opportunity.

This is a trick with a gradient background. You need 2 of them, so the diagonal is easily achieved:

Matching 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

Differences with a simple solution could be:

Pro Transparent Corners (if you have a background)

Con Worst Browser Support

Answer 2

Here is one great solution. Basically, you make the arrow always centered, and more than you will ever need, but avoid overflowing.

Here's JSFiddle: http://jsfiddle.net/nBAK9/4/

And here is an interesting code:

 .metric:after { position: absolute; top: 0; left: 50%; margin-left: -250px; /* max expected width /2 */ content: ''; background: white; width: 500px; /* max expected width */ height: 0; border: 250px solid white; /* max expected width /2 */ border-top: none; border-bottom: 50px solid #cf6; /* This size adjusts the slope of the triangle */ box-sizing: border-box; } 

Answer 3

Not sure what you can, I played with him, found that since em inherits from his parents, you can play a little with him.

 body{ font-size: 3em; } div { width: 0; height: 0; border-style: solid; border-width: 0 3em 4em 7em; border-color: transparent transparent #007bff transparent; -webkit-transform:rotate(360deg) } 

Fiddle

Answer 4

 .top-arrow:before, .top-arrow:after { position: absolute; top: -25px; content: ''; width: 50%; height: 25px; } .top-arrow:before { left: 0px; background: linear-gradient(to right bottom, transparent 50%, black 50%); } .top-arrow:after { right: 0px; background: linear-gradient(to left bottom, transparent 50%, black 50%); } <div class="top-arrow"></div>