4

我正在尝试制作一个附有向上箭头的容器。我熟悉边框绘制技巧并认为这是一个可能的解决方案，但我认为它仅适用于已知尺寸，因为您必须以 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/

各位大佬知道有什么办法可以解决吗？

4

4 回答 4

5

这是另一种可能性。

这个用渐变背景来解决问题。您需要其中 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%);
}

更新小提琴

与Simple As Could Be解决方案的区别：

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

Con更糟糕的浏览器支持

于 2013-07-02T20:48:43.737 回答
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;
}
于 2013-07-02T20:22:51.670 回答
1

不确定你能不能，我玩过它发现因为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)
}

小提琴

于 2013-07-02T16:19:43.510 回答
0 
.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>
于 2014-08-15T08:58:50.143 回答