html - 在 css 中制作更长且稍微更斜的斜线

Question

目前我有这样的设置:

HTML

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

CSS

.bp-rating{
  position:absolute;
  top:50%;
  left:50%;
  padding:10px 5px;
  border:1px solid #222;
  display:inline;
}
sup{
  color:green;
}

Codepen

我想要实现的是:

我想知道是否有办法使斜线稍微更斜一些，稍微更长一些。

是否可以在拉伸(stretch)线条的同时保持细线，是否可以完全删除斜线字符并以另一种方式使用 background？

Answer 1

这是答案，您可以根据需要增加高度或宽度，或者更改背景颜色:

HTML

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

SCSS

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

这是一个有效的 fiddle