I have been attempting to align the triangle over the edge of the table cell on both ends. However, part of the triangle is being hidden. I have tried using z-index, but it doesn't seem to have any effect. Can anyone provide insight into what might be going wrong here?
https://i.sstatic.net/8eIYe.png
Expected:
https://i.sstatic.net/HXkUh.png
Shown below is my Angular code:
<td *ngFor="let col of getNumberRange(1, maxDuration)" style="padding: 0;">
<div style="position: relative;">
<div *ngIf="col == 1" class="triangle-up"></div>
<div *ngIf="col == 1" class="start-abbreviation">START</div>
<div *ngIf="col == 5" class="end-abbreviation">END</div>
<div *ngIf="col == 5" class="triangle-down"></div>
<div *ngIf="col >= 1 && col <= 5"
style=" height: 15px; background-color: #1f4166; padding-top: 5px"></div>
</div>
</td>
.triangle-up {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #ff6600;
position: absolute;
top: 0;
left: -5px;
z-index: 1;
}
.start-abbreviation {
display: inline-block;
margin-left: 5px;
position: absolute;
top: 0px;
color: white;
left: 0;
z-index: 99999999999;
}
.triangle-down {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #ff6600;
position: relative;
top: -13px;
}
.end-abbreviation {
display: inline-block;
margin-right: 5px;
position: absolute;
top: 0px;
color: white;
left: 0;
z-index: 99999999999;
}