css三角形由父容器切出并摇晃

Question

我试图做一些向上和向下箭头，这取决于股票价格的变化（https://jsfiddle.net/ec0x7pru/6/），它们似乎是由于父容器css定义而被删除，什么将被修改为{ {1}}和triangle-up类可以防止这种情况发生。

triangle-down

另一方面，使用FF开发人员版，这些似乎有点晃动？任何解决问题的建议。

Answer 1

删除padding-right：

https://jsfiddle.net/ec0x7pru/7/

并试着用这个：

border-style: inset

Answer 2

改为使用字符：

<div class="container">
<span>DAX</span>
  <span>3000</span>

  <span id="up">&#9650;</span><span>50.6</span>
  <span>CAC 40</span>
  <span>4536</span>
  <span id="down">&#9660;</span><span>-23.2</span>
</div>

https://jsfiddle.net/ec0x7pru/13/

Answer 3

这是我的另一个答案的唯一CSS替代方案：

.container span {
    padding-right: 0.3125rem;  
    font-family: "NHaasGroteskDSPro-75Bd", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
}
.triangle-up {
    display: inline-block;
    border-style: solid;
    border-width: 0 7px 14px 7px;
    border-color: transparent transparent green transparent;
    bottom: 1em;
    padding-right:0px !important;
}

.triangle-down {
    display: inline-block;
    bottom: 1em;
    border-style: solid;
    border-width: 14px 7px 0 7px;
    border-color: red transparent transparent transparent;
    padding-right: 0px !important;
}

由于填充物，顶部有一个高原。我已经调整了边界并覆盖了它。

https://jsfiddle.net/ec0x7pru/19/