[css绘制图形:扑克牌花色] 红心、黑桃、方块、梅花

已被阅读 1302 次 | 文章分类:css | 2022-05-02 00:31

用css实现扑克牌花色的核心是对before和after伪元素的使用;当然,我们可以借助多个div去实现;不过显然跟伪元素相比,多个div显得比较低级些。

扑克牌花色

/net/upload/image/20220502/FQo4hJUWYAkK-zu.png

1 红心

/net/upload/image/20220502/9d0934470e2c4e43b55f09d2f106a54b.png

思路如下:

                                            
1 创建一个正方形div,然后旋转45度,创造出下面的拐角

2 通过before画一个圆,位置向左偏移正方形的一半距离

3 通过after画一个圆,位置向上偏移正方形的一半距离
                                            
                                        

代码如下:

                                            
<html>
    <head>
        <style>
            .heart_wrapper{
                position: absolute;
                top: 100px;
                left: 100px;
            }
            .heart{
                width: 50px;
                height: 50px;
                background-color: red;
                position: relative;
                transform: rotate(45deg);
            }
            .heart::before,.heart::after{
                content: "";
                width: 50px;
                height: 50px;
                background-color: black;
                position: absolute;
                border-radius: 50%;
            }
            .heart::before{
                left: -25px;
            }
            .heart::after{
                top: -25px;
            }
 
        </style>
    </head>
    <body>
        <div class="heart_wrapper">
            <div class="heart"></div>
        </div>
    </body>
</html>
                                            
                                        

/net/upload/image/20220502/a1ba34c51c6846d6930ec27d86364a18.png

将两个圆的颜色设置为red即可;

2 方块

方块的实现核心是伪元素after和边框border

/net/upload/image/20220502/5fce16026fb1472ea230444948b06944.png

                                            
实现思路:一个正三角和一个倒三角的拼接

1 实现一个正三角,用border-bottom实现;设置div的border即可

2 实现一个倒三角,用border-top实现;设置:after的border即可
                                            
                                        

代码如下

                                            
<html>
    <head>
        <style>
            .diamond_wrapper{
                position: absolute;
                top: 100px;
                left: 100px;
            }
            .diamond{
                width: 0;
                height: 0;
                border: 50px solid orange;
                border-bottom:90px solid red;
                position: relative;
            }
 
            .diamond::after{
                content: "";
                position: absolute;
                left: -50px;
                top: 90px;
                width: 0;
                height: 0;
                border: 50px solid black;
                border-top:90px solid red;
            }
 
        </style>
    </head>
    <body>
        <div class="diamond_wrapper">
            <div class="diamond"></div>
        </div>
    </body>
</html>
                                            
                                        

/net/upload/image/20220502/8ef957a7c7a342bfbc67e334b189350b.png

橙色部分是原生div实现;黑色部分是用after实现的div;上面的div是通过设置border宽度实现,将边框色设置为transparent即可。

                                            
注:伪元素before和after的定位属性不会默认根据自身div定位;所以还是需要给自身div设置relative属性。
                                            
                                        

3 黑桃

思路:一个正方形、两个圆、一个小三角

首先绘制出所有元素;

                                            
<html>
    <head>
        <style>
            /* 外层容器 */
            .shape{
                margin-top: 100px;
            }
            /* 1  先画一个正方形 */
            .heart{
                width: 30px;
                height: 30px;              
                background-color: #fff;
                display: inline-block;
                margin: 0 10px;
                position: relative;
            }
            /* 2 画两个偏移的圆 通过伪元素创建 */
            .heart:before,.heart:after{
                content:"";
                border-radius: 50%;
                height:30px;
                width: 30px;
                background:black;
                position: absolute;
            }
            /* 3 画小尾巴 通过border创建 */
            .tale{
                position: absolute;
                bottom: 20px;
                right: -3px;
                background: red;
                width:0;
                height:0;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 20px solid green;
            }
        </style>
    </head>
    <body>
        <div class="shape">
            <span class="heart">
                <span class="tale"></span>
            </span>
        </div>
    </body>
</html>
                                            
                                        

/net/upload/image/20220502/425eaee73655452f8a1f3a8896f4620d.png

然后加上每个元素的偏移和旋转属性

                                            
<html>
    <head>
        <style>
            /* 外层容器 */
            .shape{
                margin-top: 100px;
            }
            /* 1  先画一个正方形 */
            .heart{
                width: 30px;
                height: 30px;
                transform: rotate(135deg);
                background-color: #fff;
                display: inline-block;
                margin: 0 10px;
                position: relative;
            }
            /* 2 画两个偏移的圆 通过伪元素创建 */
            .heart:before,.heart:after{
                content:"";
                border-radius: 50%;
                height:30px;
                width: 30px;
                background:black;
                position: absolute;
            }
            .heart:before{
                top:-15px;
                left:0;
            }
            .heart:after{
                left:15px;
                top:0;
            }
            /* 3 画小尾巴 通过border创建 */
            .tale{
                position: absolute;
                bottom: 20px;
                right: -3px;
                background: transparent;
                width:0;
                height:0;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 20px solid orange;
                transform: rotate(45deg);
            }
        </style>
    </head>
    <body>
        <div class="shape">
            <span class="heart">
                <span class="tale"></span>
            </span>
        </div>
    </body>
</html>
                                            
                                        

/net/upload/image/20220502/6d534902aeea44abbf25172784c257ad.png

最后将颜色统一设置为黑色

/net/upload/image/20220502/17ec500b127348fa8d9a7d513adc6aab.png

4 梅花

/net/upload/image/20220502/27ff667773324ef48a234467632759b3.png

                                            
思路:三个圆、一个中间div、一个尾巴div 

三个圆:一个div、及before、after实现

中间部分:一个div

小尾巴:一个div、before和after实现
                                            
                                        

/net/upload/image/20220502/455931b05b78493ab24e162ec8cc2eef.png

调整颜色得到结果.

                                            
<html>
    <head>
        <style>
            /* 外层容器 */
            .circle{
                width: 100px;
                height: 100px;
                background: red;
                border-radius: 50px;
                position: absolute;
                left: 63px;
                z-index: 100;
            }
 
            .circle:before{
                content: "";
                width: 100px;
                height: 100px;
                background: red;
                border-radius: 50px;
                position: absolute;
                left: -60px;
                top: 80px;
                z-index: 100;
            }
            .circle:after{
                content: "";
                width: 100px;
                height: 100px;
                background: red;
                border-radius: 50px;
                position: absolute;
                left: 60px;
                top: 80px;
                z-index: 100;
            }
            .triangle{
                width: 0;
                height:0;
               
                border-left: 75px solid black;
                border-right: 75px solid black;
                border-bottom: 105px solid black;
                position: absolute;
                top: 40px;
                left: 38px;
                z-index: 100;
            }
 
            .base{
                background: none repeat scroll 0 0 yellow;
                height: 70px;
               
                position: absolute;
                left: 0;
                top: 140px;
                width: 200px;
                z-index: 0;
            }
            .base::before{
                width: 0px;
                height: 10px;
                position: absolute;
                left: 0;
                content: "";
                border-left: 50px solid white;
                border-right: 50px solid white;
                border-top: 10px solid white;
                border-bottom: 50px solid white;
                border-top-left-radius: 0px;
                border-top-right-radius: 0px;
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 60px;
            }
            .base::after{
                width: 0px;
                height: 10px;
                position: absolute;
                left: 125px;
                content: "";
                border-left: 50px solid white;
                border-right: 50px solid white;
                border-top: 10px solid white;
                border-bottom: 50px solid white;
                border-top-left-radius: 0px;
                border-top-right-radius: 0px;
                border-bottom-left-radius: 60px;
                border-bottom-right-radius: 0px;
            }
        </style>
    </head>
    <body>
        <div class="circle"></div>
        <div class="triangle"></div>
        <div class="base"></div>
    </body>
</html>
                                            
                                        

QQ:3410192267 | 技术支持 微信:popstarqqsmall

Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号