用backgroud绘制“加减乘除”图标

huaban (11).png

CSS

/*基础样式*/
i,div,p,span{
    display:block;
    width:1em;
    height:1em;
}

/*加*/
.add {
    display: inline-block;
    background: linear-gradient(90deg, transparent 44%, #454545 42%, #454545 56%, transparent 0%), linear-gradient(0deg, transparent 44%, #454545 42%, #454545 56%, transparent 0%);
}

/*减*/
.minus {
    display: inline-block;
    background: linear-gradient(0deg, transparent 42%, #454545 0%, #454545 57%, transparent 0%);
}

/*乘*/
.multiply {
    display: inline-block;
    border-radius: 30%;
    background: linear-gradient(45deg, transparent 45%, #454545 45%, #454545 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #454545 45%, #454545 55%, transparent 55%);
}

/*除*/
.except {
    display: inline-block;
    background: linear-gradient(0deg, transparent 42%, #454545 0%, #454545 57%, transparent 0%), radial-gradient(circle at 50% 18%, #454545 12%, transparent 00%), radial-gradient(circle at 50% 83%, #454545 13%, transparent 00%);
}

HTML

<i class="add"></i>
<div class="minus"></div>
<b class="multiply"></b>
<span class="except"></span>