CSS3寫加號的方法

/* 1. 使用::before偽類實現*/
.box:before {
content: "+";
font-size: 24px;
font-weight: bold;
}
/* 2. 使用border實現*/
.box {
width: 60px;
height: 60px;
border: 2px solid #333;
position: relative;
}
.box::before {
position: absolute;
content: "";
top: 30%;
left: 10%;
width: 40%;
height: 2px;
background: #333;
transform: rotate(45deg);
}
.box::after {
position: absolute;
content: "";
top: 30%;
left: 10%;
width: 40%;
height: 2px;
background: #333;
transform: rotate(-45deg);
}
/* 3. 使用svg實現*/
.box {
width: 60px;
height: 60px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 15.7L70.7 36.3 84.3 23.4 50 0 15.7 23.4 29.3 36.3z'/%3E%3C/svg%3E") no-repeat center;
}