我想在两个数字之间添加一条大斜线,以获得如下图所示的输出:
我正在尝试使用 /
来添加斜线,但效果不太好(它显示在数字之后,而不是数字下方)。有没有办法让输出接近上图?
<div class="box">
<span class="top">41</span>
<span class="line">/</span>
<span class="bottom">50</span>
</div>
.top {
font-size: 100px;
font-weight: bold;
}
.line {
font-size: 100px
}
JSFiddle: http://jsfiddle.net/jxk8fvus/
最佳答案
使用倾斜变换
此方法使用以下内容:
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>
使用斜杠字符
此方法使用以下内容:
- 用于生成斜线的普通斜线字符。
- 容器元素
display
属性设置为inline-block
用于数字和斜杠字符。 - 合适
vertical-align
为每个容器设置,使它们看起来像一个分数。
如果您想支持旧版本的 IE,这种方法很有用。缺点是斜杠字符不允许对斜杠的 Angular 进行太多控制。
.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">/</span><!--
--><span class="bottom">50</span>
</div>
注意: <!-- -->
在第二个片段中是为了避免 inline-block
之间的额外空间元素。
使用渐变
此方法使用以下内容:
- Angular
linear-gradient
设置为background
父盒容器。 - 容器元素
display
属性设置为inline-block
对于数字以及适当的vertical-align
设置。
这种方法的优点是它不使用任何额外的真实/伪元素。缺点是浏览器对渐变的支持相对较低。
.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 - 斜杠的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31180608/