Проба создания символа рубля на цсс

В маленьких размерах искажается из-за неправильных округлений значений свойств

by SerGen

HTML

124 <span class="ruble">руб</span>

CSS

body {
    font-family: arial;
    font-size: 5em;
}

.ruble {
    /* box-shadow: inset 30px 0 0; */
    box-shadow: inset .11538461538461538461538461538462em 0 0;
    color: #000;
    display: inline-block;
    /* height: 260px; */
    height: 1em;
    font-size: .71em;
    margin-top: -.26em;
    text-indent: -9999px;
    position: relative;
    vertical-align: middle;
    /* width: 180px; */
    width: .69230769230769230769230769230769em;
}
.ruble:before,
.ruble:after {
    content: '';
    position: absolute;
}
.ruble:before {
    /* border: 30px solid; */
    border: .11538461538461538461538461538462em solid;
    /* border-radius: 80px/100px; */
    border-radius: .30769230769230769230769230769231em/.38461538461538461538461538461538em;
    /* clip: rect(auto auto auto 260px); */
    clip: rect(auto auto auto .95em);
    height: 35%;
    right: 0;
    top: 0;
    width: 200%;
}
.ruble:after {
    /* box-shadow: 0 -42px 0; */
    box-shadow: 0 -.16153846153846153846153846153846em 0;
    /* border-top: 30px solid; */
    border-top: .11538461538461538461538461538462em solid;
    right: 30%;
    top: 62.5%;
    width: 80%;
}