将％处的元素与css对齐

Question

我画了2个酒吧，一个是70％，另一个是100％。我想要的是有一个小三角形指向70％。

我画这样的三角形：

.arrowUp {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;

  border-bottom: 10px solid black;
}

问题是如果我将左右边距分别设为70％和30％，我希望它与条形末端的尖端对齐。但我最终得到这样的东西：

如何让三角形的尖端指向黑条的末端？

Answer 1

设置负左边距。

{{1}}

Answer 2

＆＃13;

＆＃13;

.bar1{
  width: 500px;
  height: 10px;
  background-color: gray;
}
.bar2{
  position: relative;
  width: 70%;
  height: 10px;
  background-color: red;
}
.arrowUp {
  position: absolute;
  top: 100%;
  right: -10px;

  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;

  border-bottom: 10px solid black;
}

＆＃13;

<div class="bar1">
  <div class="bar2">
    <span class="arrowUp"></span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;