斜线的样式

Question

我想在两个数字之间添加一个大斜线，以获得输出，如下图所示：

我正在尝试使用/添加斜杠，但它做得不对（它显示在数字后面，而不是在数字下面）。无论如何都要使输出接近上图​​？

<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

使用偏斜变换

此方法使用以下内容：

• transform: skew(-45deg)的伪元素，border-left生成一条类似斜线字符的行。
• 包含数字的两个span的绝对定位。像span这样的分子相对于左上角定位，而像span这样的分母相对于右下角定位。

如果您想支持IE8及更低版本，此方法的一个潜在缺点是浏览器支持。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用斜线字符

此方法使用以下内容：

• 生成斜杠的正常斜杠字符。
• 对于数字和斜杠字符，display属性设置为inline-block的容器元素。
• 为每个容器设置适当的vertical-align设置，使它们看起来像一个分数。

如果您想支持旧版本的IE，这种方法很有用。缺点是斜线字符不允许对斜线的角度进行太多控制。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

^{注意：第二个代码段中的<!-- -->是为了避免inline-block元素之间的额外空间。}

使用渐变

此方法使用以下内容：

• 有角度的linear-gradient设置为父框容器的background。
• display属性设置为inline-block的容器元素，以及相应的vertical-align设置。

这种方法的优点是它不使用任何额外的实/伪元素。缺点是对渐变的浏览器支持相对较低。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这样做：

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

玩数字。