斜线的样式 [英] Style for a slash

问题描述

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

我试图使用&＃47; 斜杠，但它不做相当正确（它显示在数字后面，不低于数字）。是否仍有输出接近上述图像？

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

• 具有的伪元素transform：skew（-45deg） $ 的 border-left 生成类似于斜杠字符的线。


• code> 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;身高：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>  

---

使用斜杠字符

此方法使用以下方法：

• 生成斜杠的正常斜杠字符。


• 显示

• 适当的 vertical-$ c>属性设置为 inline-block



这种方法是有利的，如果你想支持旧版本的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> - >  

b
$ b

^{注意：第二个片段中的<！ - - > 以避免 inline-block 元素之间的额外空间。}

---

使用渐变

此方法使用以下方法：

• 一个有角度的线性渐变设置为父框容器的背景。


• 容器元素显示属性设置为 inline-block




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





  .box {height：125px; width：125px; font-size：100px;背景：线性梯度（至左上，透明49.5％，黑色49.5％，黑色50.5％，透明度50.5％）; background-size：75％75％;背景位置：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>  




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/

解决方案

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>

这篇关于斜线的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！