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

1 红心

思路如下：

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>

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

2 方块

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

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

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>

橙色部分是原生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>

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

<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>

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

4 梅花

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

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

中间部分：一个div

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

<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>

调整颜色得到结果.

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

java里如何表示黑桃方片_扑克红桃，方片，黑桃，梅花他们的顺序如何，代表什么意义呀？jac 爱问知识人...
一副扑克中的52张是正牌,表示一年中有52个星期:两张是副牌,大王表示太阳,小王代表月亮.由于一年有春.夏.秋.冬四个季度,所以又分别用黑桃.红桃.草花.方块4种花色表示.其中红色的红桃.方块表示白昼 ...
黑桃8形式的c语言编程,C语言的随机发牌程序（红桃、黑桃、梅花、方块）
做一个随机发牌的C语言程序,供大家学习,思考. 未做任何注释,有测试时候留下的一些输出语句,一遍方便测试. /* author:nunu qq:398269786 */ #include #inclu ...
C语言的随机发牌程序（红桃、黑桃、梅花、方块）
做一个随机发牌的C语言程序,供大家学习,思考. 未做任何注释,有测试时候留下的一些输出语句,一遍方便测试. /* author:nunu qq:398269786 */ #include<std ...
强大的CSS：图形绘制合集，方便你我！
以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的,不少实现以前我介绍过,或者你也知道,但是有些相信你没见过. 1. 正方形实时渲染效果如下: 相关CSS代码: #square {widt ...
扑克牌花色是什么意思
扑克牌是在15世纪,由法国人设计出来的,所以牌面上的人像(J.Q.K)所穿的衣服,就是当时皇后.国王的服装. .扑克牌与日历的亲密关系很多人会利用扑克牌进行各种游戏娱乐流动,但懂得扑克经的人恐怕为数 ...
三角形css_使用css绘制三角形
好看的前端网页大家见到的应该都不少但是很多都是用图片作为背景今天我们就给大家讲讲怎么用css绘制图形 (图形如下) ---------------------------------------- ...
假定一副新扑克牌的顺序为：大王、小王、黑桃A,2,3,…,T,J,Q,K、红心A,2,3,…,T,J,Q,K、方块 A,2,3,…,T,J,Q,K、梅花A,2,3,…,T,J,Q,K。现将两副扑克牌摞
(1) 假定一副新扑克牌的顺序为:大王.小王.黑桃A,2,3,-,T,J,Q,K.红心A,2,3,-,T,J,Q,K.方块A,2,3,-,T,J,Q,K.梅花A,2,3,-,T,J,Q,K.现将两副扑 ...
css 渐变椭圆,CSS图形基础：利用径向渐变绘制图形
1．径向渐变 radial-gradient() 函数用于创建一个径向渐变的"图像",其一般调用格式为: background-image: radial-gradient(sha ...
黑桃k游戏java实战_#Java小案例扑克牌小游戏
知识点: 1.Collections.sort; 2.do while确保不重复; 3.重写compare 比较规则; 主要的对象有 1.玩家 (ID.姓名.手牌列表) 2.卡牌(花色.点数) 1.玩 ...
CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

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

1 红心

2 方块

3 黑桃

4 梅花

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

最新文章

热门文章