Attach the css arrow to the top of a css border - css

Question

This would be really easy using negative margins, but I can't use them inside a <table>. Been at this for hours last night and this morning. Already googled different types of navs and there's nothing like this.
How do I make the CSS arrow stick to the top and bottom of the vertical line? 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">
Why
</td>
</tr>
<tr>
<td class="right">
<div class="active">Home</div>
</td>
<td><span class="dot"></span> <small> You are here.</small></td>
</tr>
<tr>
<td class="right">
Examples
</td>
</tr>
<tr>
<td class="right">
Process
</td>
</tr>
<tr>
<td class="right">
Tools
</td>
</tr>
<tr>
<td class="v"><i class="down"></i></td>
<td style="padding-left: 10px;">
Concrete
</td>
</tr>
</table>
</div>

Answer 1

Position relative and then use top & right negatives
.v {
position: relative;
right:-6px;
top: -15px;
text-align: right;
}