html – 斜线的样式

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

我试图使用/添加斜杠,但它不会做得很正确(它显示在数字之后,而不在数字下方).有没有得到输出接近上述图像？

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

解决方法

使用倾斜变换

这种方法使用以下方法：

>具有变换的伪元素：skew(-45deg),其边框左边产生类似于斜杠字符的行.
>包含数字的两个跨度的绝对定位.像跨度的分子相对于左上方定位,而分母像跨度相对于右下方定位.

这种方法的一个潜在缺点是如果您想要支持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>

使用斜杠字符

这种方法使用以下方法：

>产生斜线的正常斜杠字符.
>具有显示属性的容器元素设置为内联块,用于数字和斜杠字符.
>对每个容器进行适当的垂直排列设置,使其看起来像分数.

如果要支持旧版本的IE,这种方法是有利的.缺点是斜线字符不能很好地控制斜线的角度.

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

注意：<！ - - >在第二个片段中是为了避免内联块元素之间的额外空间.

使用渐变

这种方法使用以下方法：

>倾斜线性梯度设置为父框容器的背景.
>具有显示属性的容器元素设置为数字的内嵌块以及适当的垂直对齐设置.

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

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

html – 斜线的样式

解决方法

猜你在找的HTML相关文章