Html 在css中创建一个更长、稍微更斜的斜杠

目前，我的设置如下：

HTML

<div class="bp-rating">
  <sup class="small-num">8.5</sup>
  <span class="slash">/</span>
  <sub class="total-num">10</sub>
</div>

我试图实现的是：

我想知道是否有任何方法可以使斜线稍微斜一点，稍微长一点

---

是否可以在保持细线的同时拉伸线条，是否最好完全删除斜杠字符，然后用另一种方式执行，如使用

背景
？
答案如下，您可以根据需要增加高度或宽度，或更改背景色：

HTML

这是一个正在运行的
检查一下

通过
transform
ing a
div
（行）实现-45度。
（使用
斜杠
类的
背景
更改颜色

我猜你可以从这开始，得到你想要的


.bp评级{
位置：绝对位置；
最高：50%；
左：50%；
填充：10px 5px；
边框：1px实心#222；
显示：内联；
}
.bp评级>*{
显示：内联块；
垂直对齐：中间对齐；
}
.bp评级。小数值{
颜色：绿色；
}
.斜杠{
宽度：35px；
高度：1px；
变换：旋转（-45度）；
显示：内联块；
背景：#111；
}

8.5
10
您可以使用transform创建斜杠，而不是使用文本


.bp评级{
位置：绝对位置；
最高：50%；
左：50%；
填充：10px 5px；
边框：1px实心#222；
显示：内联；
苏普{
颜色：绿色；
}
}
.斜杠{
高度：25px；
宽度：0px；
变换：倾斜（-45度）平移（5px，8px）；
边框：实心1px黑色；
显示：内联块；
}

8.5
10
这是SCS而不是css。有些人可能会对此感到困惑。顺便说一句，你可以使用伪元素（：before，：after）为你创建一条线，然后使用transform旋转它。工作得很有魅力我认为这是最好的选择，只是想确保：）太棒了@努布斯基
.bp-rating{
  position:absolute;
  top:50%;
  left:50%;
  padding:10px 5px;
  border:1px solid #222;
  display:inline;
}
sup{
  color:green;
}

<div class="bp-rating">
  <sup class="small-num">8.5</sup>
  <span class="slash"></span>
  <sub class="total-num">10</sub>
</div>

.bp-rating{
  position:absolute;
  top:50%;
  left:50%;
  padding:10px 5px;
  border:1px solid #222;
  display:inline;
  sup{
    color:green;
  }
  .slash {
    height:1px;
    width: 40px;
    background: black;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(-45deg)
  }
}