Style for a slash

Question

I want to add a big slash kind of line between two numbers to get the output as in the following image:

I am trying to use / to add the slash but it does not do quite right (it displays after the number, not below the number). Is there anyway to get the output close to the above image?

<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/

Answer 1

Using Skew Transforms

This approach makes use of the following:

• A pseudo-element with transform: skew(-45deg) whose border-left produces a line that resembles a slash character.
• Absolute positioning of the two span that contain the numbers. The numerator like span is positioned with respect to top left whereas the denominator like span is positioned with respect to bottom right.

One potential drawback of this approach is the browser support if you want to support IE8 and lower.

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

---

Using Slash Character

This approach makes use of the following:

• A normal slash character to produce the slash.
• Container elements with display property set to inline-block for the numbers and the slash character.
• Appropriate vertical-align setting for each of the containers to make them look like a fraction.

This approach is advantageous if you want to support older versions of IE. Drawback is that the slash character would not allow much control over the angle of the slash.

.top {
  font-size: 50px;
  vertical-align: top;
  margin-top: 10px;
}
.bottom {
  font-size: 25px;
  vertical-align: bottom;
  margin-bottom: 20px;
}
.line {
  font-size: 100px;
  vertical-align: middle;
}
.top, .bottom{
  font-weight: bold;
}
.box * {
  display: inline-block;
}

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

^{Note: The <!-- --> in the second snippet is to avoid extra space between inline-block elements.}

---

Using Gradients

This approach makes use of the following:

• A angled linear-gradient set as the background of the parent box container.
• Container elements with display property set to inline-block for the numbers along with appropriate vertical-align setting.

Advantage of this approach is that it doesn't use any extra real/pseudo elements. Drawback is the relatively lower browser support for gradients.

.box {
  height: 125px;
  width: 125px;
  font-size: 100px;
  background: linear-gradient(to top left, transparent 49.5%, black 49.5%, black 50.5%, transparent 50.5%);
  background-size: 75% 75%;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}
.top {
  font-size: 75px;
  vertical-align: top;
  margin-top: 10px;
}
.bottom {
  font-size: 25px;
  vertical-align: bottom;
  margin-left: -10px;
}
.box * {
  display: inline-block;
  font-weight: bold;
}

<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>

Answer 2

This will do:

jsFiddle

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

Play with the numbers.