在css中,我们可以使用一些技巧来打出像扑克牌中的黑桃这样的形状。.suited { display: inline-block; width: 0; height: 0; border-top: 3
在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,表示这两个角不应圆化,从而完成我们需要的黑桃形状。
粉丝
0
关注
0
收藏
0