我正在尝试制作一个带有向上箭头的容器。我熟悉边框绘制技巧 https://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work并认为这是一个可能的解决方案，但它仅适用于我认为的已知尺寸，因为您必须以 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/ http://jsfiddle.net/C8XJW/2/

你们知道有什么方法可以解决这个问题吗？

这是另一种可能性。

这个可以用渐变背景来解决这个问题。您需要其中 2 个，以便轻松实现对角线：

相关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%);
}

更新了小提琴 http://jsfiddle.net/C8XJW/3/

与的差异尽可能简单解决方案：

Pro透明角（如果您有背景则相关）

Con更差的浏览器支持