[分享]css中如何打出黑桃

在css中，我们可以使用一些技巧来打出像扑克牌中的黑桃这样的形状。

.suited {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 30px solid black;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-radius: 50% 50% 0 0;
} 

以上代码中，我们创建了一个名为“suited”的类，它使用了border-top、border-left和border-right属性来描绘黑桃的形状。这三个属性的取值都是用solid关键字，也就是说它们是实线。其中，border-top的宽度为30px，由于border-left和border-right的宽度较小，因此我们可以使用透明的边框来完成黑桃的角落。

此外，我们通过border-radius属性来使黑桃单元的角落看起来更加圆润。这个属性的值是一个四值长度，它的前两个值分别控制左上角和右上角的圆弧大小，这里我们设置为50%，就是将左右两边的角落全部圆润，最后两个值就分别控制左下角和右下角的圆弧大小，我们设置为0，表示这两个角不应圆化，从而完成我们需要的黑桃形状。