Фракционные элементы высоты с абсолютно позиционированными детьми

Question

Я пытаюсь стилизовать некоторые из моих элементов, используя абсолютно позиционированный :before псевдо-элементы. Вот как я сейчас достигаю этого:

.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;
}

Проблема в том, что когда у меня есть список с несколькими элементами, стилизованными под этот стиль, и элементы имеют дробную высоту (например, height:10.3px, помня, что вы также можете получить дробные числа при использовании процентов), иногда эффект будет смещен на один пиксель вверх или вниз. Вы можете увидеть это в действии в следующей скрипке:

JS Fiddle с текущим поведением

Можно ли заставить элемент всегда округляться (или уменьшаться), чтобы мой элемент всегда имел одинаковую высоту пикселя после его округления браузером?

Answer 1

В вашем CSS используйте top: 0; вместо bottom: 0;

Вот пример