When creating two bars at 70% and 100%, I also want a small triangular shape to point specifically at the 70% mark.
Here is how I am currently drawing the triangle:
.arrowUp {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
The challenge arises when attempting to align the triangle tip with the end of the bar by giving left and right margins as 70% and 30%. Unfortunately, this results in misalignment like shown below:
https://i.sstatic.net/FeCQz.png
If anyone knows how to correctly position the triangle tip to match the end of the black bar, kindly share your expertise. Thank you!