在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

我想要实现的目标是：

我想知道是否还有斜线略微更长的斜线。

是否可以在保持细线的同时拉伸线条，并且最好只是完全删除斜线字符，而只是像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

Answer 2

看看这个！

transform div（行）-45degrees实现。 （使用background类的slash更改颜色。

猜猜你可以从这开始就得到你想要的东西。

.bp-rating {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 10px 5px;
  border: 1px solid #222;
  display: inline;
}
.bp-rating > * {
  display: inline-block;
  vertical-align: middle;
}
.bp-rating .small-num {
  color: green;
}
.slash {
  width: 35px;
  height: 1px;
  transform: rotate(-45deg);
  display: inline-block;
  background: #111;
}

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

Answer 3

您可以使用transform来创建斜杠而不是使用文本。

＆＃13;

＆＃13;

.bp-rating{
  position:absolute;
  top:50%;
  left:50%;
  padding:10px 5px;
  border:1px solid #222;
  display:inline;
  sup{
    color:green;
  }
}
.slash{
  height: 25px;
  width: 0px;
  transform: skew(-45deg) translate(5px, 8px);
  border: solid 1px black;
  display: inline-block;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;