I've been experimenting with styling elements using absolutely positioned :before pseudo-elements. My current approach looks like this:
.element:before {
content: "";
display: block;
height: 0;
width: 0;
border: 10px solid #ad0c38;
border-right-color: transparent;
border-bottom-color: transparent;
position: absolute;
bottom: 0px;
right: -20px;
}
However, I've noticed an issue when applying this style to a list of multiple elements with fractional heights (e.g. height:10.3px). Due to the nature of how browsers round fractioned numbers, the effect sometimes appears shifted by one pixel up or down. You can see this inconsistency in action in the following Fiddle:
JS Fiddle showcasing the issue
Is there a way to ensure that the element's height is always rounded to a whole number, either up or down? This would help maintain consistency in the appearance of my styled elements.