1 红心
思路如下：
代码如下：
<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
代码如下
<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即可。
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 梅花
<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>调整颜色得到结果.
