CSS做黑桃

/* HTML結(jié)構(gòu) */
AA
/* CSS樣式 */
.spades {
width: 100px;
height: 150px;
position: relative;
}
.spades .top,
.spades .bottom {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: black;
font-size: 24px;
color: white;
text-align: center;
line-height: 30px;
}
.spades .top {
top: 10px;
}
.spades .bottom {
bottom: 10px;
}
.spades .center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50% 50% 0 0;
background: black;
}

以上就是使用CSS制作黑桃圖形的代碼和效果展示。