1.阴阳八卦
<style type="text/css">
#yin-yang{
position:relative;
width:96px;
height:48px;
background:white;
border-color:black;
border-style:solid;
border-width:2px 2px 50px 2px;
border-radius:100%;
margin:20px 100px;
animation:myfirst 4s linear infinite;//这句代码是引用动画，需要动态的可以添加这句代码，动画定义在下方，如果不需要动态的，就无需添加这句话 }
#yin-yang::before,
#yin-yang::after
{
content:" ";
position:absolute;
top:50%;
left:0;
width:12px;
height:12px;
background:white;
border:18px solid black;
border-radius:100%;
}
#yin-yang::after{
left:50%;
background:black;
border-color:white;
}//定义动画
@keyframes myfirst{
0%{
transform: rotate(0deg);//当在0%时，让他旋转0度
}
100%{
transform: rotate(360deg);//当在100%时，让他旋转360度
}
}
</style>见下图：
2.Heart（心形）
<style type="text/css">
#heart{
position:relative;
width:100px;
height:90px;
}
#heart::before,
#heart::after{
content:" ";
position:absolute;
left:50px;
top:0;
width:50px;
height:80px;
background:red;
border-radius:50px 50px 0 0;
transform:rotate(-45deg);//逆向旋转45度
transform-origin:0 100%;//设置旋转元素的基点位置
}
#heart::after{
left: 0;
transform:rotate(45deg);
transform-origin:100% 100%;
}
</style>见下图：
3.Infinity(无限循环）
<style type="text/css">
#infinity{
position:relative;
width:212px;
height:100px;
}
#infinity::before,
#infinity::after{
content:" ";
position:absolute;
top:0;
left:0;
width:60px;
height:60px;
border:20px solid red;//设置上边框，右边框，下边框，左边框的宽度为20px
border-radius:50px 50px 0 50px;
transform:rotate(-45deg);
}
#infinity::after{
left: auto;
right:0;
border-radius:50px 50px 50px 0;
transform:rotate(45deg);//这本来是个正方形，让他旋转45度，然后在调整他的各个角的大小，两个这样的图形拼在一起就是这个图形
}
</style>见下图：
4.cone（扇形）
<style type="text/css" >
.cone{
width:0;
height:0;
border-left:70px solid transparent;
border-right:70px solid transparent;
border-top:100px solid red;
border-radius:50%;
}
</style>见下图：
5.五角星
<style type="text/css">
#star-five{
display: block;
position: relative;
width: 0px;
height: 0px;
color: red;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;//这三个方向的border是为了设置底部的三角形
transform:rotate(35deg);//让底部三角形正的旋转35度，就成为了斜的三角形
margin: 100px 100px;
}
#star-five::before,
#star-five::after {
content: '';
display: block;
position: absolute;
top: -45px;
left: -65px;
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;//这三个方向的border也是为了设置底部三角形，
transform:rotate(-35deg);//但是这次是让底部三角形逆向旋转35度，这样两个三角形就交叉在了一起。小编这里就不画了，有心的你可以试试
}
#star-five::after {
color: red;
top: 3px;
left: -105px;
border-right-width: 100px;
border-bottom-width: 70px;
border-left-width: 100px ;//这三个border是为了设置上三角形
transform:rotate(-70deg);
}
</style>见下图：
6.月亮
<style type="text/css">
#moon{
width:80px;
height:80px;
border-radius:50%;
box-shadow:15px 15px 0 0 #E1AD47;
}
</style>见下图：
6.十字架
<style type="text/css">
#cross{
position:relative;
width:20px;
height:100px;
background:#CFCFCF;
margin:20px 100px;
}
#cross::after{
content:"";
position:absolute;
left:-25px;
top:30px;
width:70px;
height:20px;
background:#A5A5A5;
}
</style>见下图：
7.动画嘴巴
<style type="text/css">
#pacman{
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-radius:60px;
margin:20px 20px;
}见下图：
8.文字泡
<style type="text/css">
#bubble{
position:relative;
width:100px;
height:40px;
line-height:40px;
background:blue;
border-radius:10px;
margin:20px;
text-align:center;
color:#fff;
}
#bubble::after{
content:" ";
position:absolute;
top:-9px;
right:-3px;
width:20px;
height:20px;
border-radius:50%;
border-bottom:5px solid blue;
transform:rotate(-25deg);
}
</style>
</head>
<body>
<div id="bubble">
<h5>文字泡</h5>
</div>
</body>见下图：
