将css箭头附加到css边框的顶部

Question

使用负边距确实很容易，但是我不能在<table>中使用它们。昨晚和今天早上在这里呆了几个小时。已经在Google上搜索了各种类型的导航，而没有像这样的东西。

如何使CSS箭头粘在垂直线的顶部和底部？ https://codepen.io/TylerL-uxai/pen/ZqYNjw

td {
  padding-top: 10px;
  padding-bottom: 10px;
}
.active {
  font-weight: bold;
}

table {

    border-collapse: collapse;
}

.right{

    text-align: right;
    border-right: 1px solid black;
}

.v {
  text-align: right;
}

i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.dot {
  height: 10px;
  width: 10px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

<div class="menu">
  <table>
    <tr>
      <td class="v">
       <i class="arrow up"></i> 
      </td>
      <td>
        Abstract
      </td>
    </tr>
    <tr>
      <td class="right">
        <a href="#">Why</a>
      </td>
    </tr>
    <tr>
      <td class="right">
        <div class="active"><a href="#">Home</a></div>
      </td>
      <td><span class="dot"></span> <small> You are here.</small></td>
    </tr>
    <tr>
      <td class="right">
        <a href="#">Examples</a>
      </td>
    </tr>
    <tr>
      <td class="right">
        <a href="#">Process</a>
      </td>
    </tr>
    <tr>
      <td class="right">
       <a href="#">Tools</a>
      </td>
    </tr>
    <tr>
      <td class="v"><i class="down"></i></td>
      <td style="padding-left: 10px;">
        Concrete
      </td>
    </tr>
  </table>
</div>

Answer 1

相对位置，然后使用上下负片

.v {
  position: relative;
  right:-6px;
  top: -15px;
  text-align: right;
}