CSS3 加減法的實現(xiàn)方法

/* 加法 */
.addition {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
.addition:before,
.addition:after {
content: "";
background-color: white;
position: absolute;
}
.addition:before {
width: 60%;
height: 20%;
top: 50%;
left: 20%;
transform: translateY(-50%);
}
.addition:after {
width: 20%;
height: 60%;
top: 20%;
left: 50%;
transform: translateX(-50%);
}
/* 減法 */
.subtraction {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
}
.subtraction:before {
content: "";
background-color: white;
position: absolute;
width: 60%;
height: 20%;
top: 50%;
left: 20%;
transform: translateY(-50%);
}
.subtraction:after {
content: "";
background-color: white;
position: absolute;
width: 20%;
height: 60%;
top: 20%;
left: 50%;
transform: translateX(-50%);
}
.subtraction:before,
.subtraction:after {
content: "";
background-color: white;
position: absolute;
}
.subtraction:after {
width: 60%;
height: 20%;
top: 50%;
left: 20%;
transform: translateY(-50%);
}

以上代碼分別實現(xiàn)了CSS3中的加法和減法，通過使用:before和:after偽元素來實現(xiàn)。

加法是通過一個正方形和兩個矩形組成，矩形的相對位置和大小通過定位和transform屬性來實現(xiàn)。

減法與加法類似，但是頂部和底部的矩形是顛倒的。