Стиль для косой черты

Я хочу добавить строку с большим косой чертой между двумя числами, чтобы получить результат, как на следующем изображении: enter image description here

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

<div class="box">
    <span class="top">41</span>
    <span class="line">&#47;</span>
     <span class="bottom">50</span>
</div>

.top {
    font-size: 100px;
    font-weight: bold;
}

.line {
    font-size: 100px
}

JSFiddle: http://jsfiddle.net/jxk8fvus/

Ответы

Ответ 1

Использование Skew Transforms

В этом подходе используется следующее:

  • Псевдоэлемент с transform: skew(-45deg), чья border-left создает строку, которая напоминает символ косой черты.
  • Абсолютное позиционирование двух span, содержащих числа. Числитель, подобный span, позиционируется относительно верхнего левого, тогда как знаменатель, такой как span, позиционируется относительно нижнего правого.

Одним из потенциальных недостатков этого подхода является поддержка браузера, если вы хотите поддерживать IE8 и ниже. 

.box {
  position: relative;
  height: 150px;
  width: 150px;
}
.top, .bottom {
  position: absolute;
  font-weight: bold;
}
.top{
  top: 0px;
  left: 0px;
  font-size: 100px;
}
.bottom {
  bottom: 0px;
  right: 0px;
  font-size: 25px;
}
.box:after {
  position: absolute;
  content: '';
  bottom: 0px;
  right: 0px;
  height: 60%;
  width: 0%;
  border-left: 1px solid;
  transform: skew(-45deg);
  transform-origin: top left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="box">
  <span class="top">41</span>
  <span class="bottom">50</span>
</div>

Ответ 2

Это сделает:

jsFiddle

Обновлено Fiddle

.line {
        width: 80px;
        height: 80px;
        border-bottom: 1px solid black;
        -webkit-transform: translateY(50px) translateX(5px) rotate(135deg);
            -ms-transform: translateY(50px) translateX(5px) rotate(135deg);
             -o-transform: translateY(50px) translateX(5px) rotate(135deg);
                transform: translateY(50px) translateX(5px) rotate(135deg);
        position: absolute;
}

Играйте с цифрами.