伪元素实现div内添加45度对角斜线

最终实现效果如下

精简代码如下

.colorItem {
    width: 28px;
    height: 28px;
    position: relative;
}
.colorItem::after{
    content: '';
    position: absolute;
    bottom: 0; // 先在div下面创建一条线
    width: 36px; // 宽度可固定，也可根据需求计算
    height: 1px; // 高度，即线粗
    background-color: #ECEDED; // 设置线的背景色，即线条颜色
    transform-origin: left; // 将旋转的参考点设置为左端，即以左边为原点，用来后面的旋转
    transform: rotate(-45deg); // 旋转-45°
}