记一次解中学应用题

事情的起因是需要实现一个二维码并在右上角加上不超过4个字的角标,角标的高度的2个字高,起初交给小弟来做,结果位置怎么调都不正确,于是无奈之下,最终成为了一道初中数学题

需求大概如下图所示 需求

右上角的角标可以使用一个伪元素实现,文字则可以使用父元素的 data-tag 属性中的文字,这部分没有什么难的。

那么为了实现这个效果,可以将伪元素的移动拆分成三个步骤,并取得伪元素的定位位置及移动尺寸就好了。 如图所示

既然明确了未知数与条件,我们就可以将这个问题解析成一个非常简单的中学数学题。

如下所示,我们需要保证A点在移动后仍然在矩形区域内,也就是极限为B点的情况,不过如果这时候角标的宽度仍然为 4em 的话,字的两侧就空白了;所以我们在保证上面一个条件满足的情况下,还需要让角标覆盖到粉色三角形的区域,所以容易得出角标的宽度为 8em,需要在水平及垂直方向移动的距离

m = 2 / √2

最后将最小字数及行高转换为变量方便修改后,可以得到下面的less

  &:before {
    @text-length: 4;
    @tag-height: 2;
    content: attr(data-tag);
    display: block;
    position: absolute;
    width: @text-length * 2em; // 标签宽度为2倍最大字数
    background: gray;
    top: 0;
    right: -@text-number * 1em;
    margin-right: (@text-length / 2em) / sqrt(2);
    margin-top: (@text-length / 2em) / sqrt(2);
    color: #fff;
    font-size: 12px;
    line-height: @tag-height;
    text-align: center;
    transform-origin: 50% 0;
    transform: rotate(45deg);
    z-index: 10;
  }

See the Pen gPRVjZ by 陈卓恺 (@bruceCzK) on CodePen.

总结

这个实现方式的亮点主要有两个

1.使用了伪元素 content 属性的 attr(data-tag),不需要添加额外的标签及JS

2.计算角标的 css 值时运用了一些简单但是科学的数学计算,避免需求变更时的手动计算

缺点是兼容性略有不足

以上。