制作具有响应宽度和仅CSS的箭头形状

Question

我正在尝试制作一个附有向上箭头的容器。我熟悉border drawing trick并认为这是一个可能的解决方案，但它只适用于我认为已知的大小，因为你必须在em或px中指定边框。

我想做的形状是：

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

内容区域可以作为父容器的百分比弯曲到不同的大小。

这是CSS，标记了问题区域：

.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;
}

这是jsfiddle：http://jsfiddle.net/C8XJW/2/

你们有没有办法解决这个问题？

Answer 1

这是另一种可能性。

这个有渐变背景的技巧。你需要其中的两个，这样才能轻松实现对角线：

相关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

与简单可能解决方案的区别：

专业透明角落（如果您有背景则相关）

Con 更糟糕的浏览器支持

Answer 2

这是一个很好的解决方案。基本上，你使箭头始终居中，并且比你需要的更大，但是要把溢出物丢掉。

这是JSFiddle： http://jsfiddle.net/nBAK9/4/

这是有趣的代码：

.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

不确定你可以，我玩它发现，因为em继承自父母，你可以玩它。

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>