Make an arrow shape with responsive width and only CSS

问题

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?

回答1:

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

回答2:

Here's one great solution. Bascially, you make the arrow always centered, and bigger than you'd ever need it, but lop off the overflow.

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

And here's the 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;
}

回答3:

Not sure you can, I played with it found that since em inherits from parents you can play a bit with it.

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

回答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>

来源：https://stackoverflow.com/questions/17430445/make-an-arrow-shape-with-responsive-width-and-only-css