为什么要用CSS来画个徽章？这货脑子进水了吧！
今天在电脑前设计，要做徽章效果。突然觉得可以尝试用css实现近似的效果。说干就干，打开编辑器，让我的手指头活跃起来！
技术要点
- 通过多个圆形嵌套和渐变属性，实现渐变的刻痕和徽章面的金色效果。你不妨数数，一共几个圆形。
- 使用伪类实现缎带的折叠效果和折叠的缺角。
- 使用css文字投影和旋转属性，实现六个星星 和 徽章表面 金色文字的 凹刻和排列。
- 使用多层圆角矩形的叠加，模拟多边星型的徽章形状。
CSS画徽章的优势和劣势
优势：
- 加载速度快！
- 颜色和文字修改更方便
- ... 你来接着编。
劣势？
画外音：“这是个典型的三费情况啊！ 费脑子，费键盘，费时间。”
好吧，都让你知道了，这也是为什么我们不那么爱写这样的CSS。没事看会儿电影去不好吗？
实现步骤
第一步：要有一个圆，一个金色渐变的圆。
因为我后面要做可能更多个徽章，所以先在页面中间写一个 div shape_box 用来把我们的徽章包起来。然后，再写一个 div shape_out，用它来画一个黄色的圆。
<div class="shape_box">
<div class="shape_out">
</div>
</div>给 shape_out 增加样式，使它变成圆形
.shape_out{
position: relative;
height: 140px;
width: 140px;
border-radius: 50%;
background: #fc0;
}实现效果如图：
然后，我打开PS和我要模拟的目标图片，提取颜色值。（相信每个前端er的电脑里应该都装有PS软件吧？）
这里，我们提取了一个极暗的金属色 #c7aa68 ，两个个中间过渡色 #ce9f4f, #d0b15e，一个明亮的金属色 #fff6c5 。然后给 shape_out 增加背景色。
background: linear-gradient(135deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
background-size: 100%;
background-position:50% 50%;实现效果如图：
然后我们给它加个小投影：
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);这个div的样式就定下来了。
/* 外圈最大的圆 */
.shape_out{
position: relative;
height: 140px;
width: 140px;
border-radius: 50%;
background: #fc0;
background: linear-gradient(135deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
background-size: 100%;
background-position:50% 50%;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}第二步：一条金色渐变的刻线。
为了模拟徽章内从外到内的第一个渐变的刻线。因为css的边框属性，不支持渐变，所以，为了实现这个效果，我们需要两个圆。思路是第一个圆做一个渐变背景，第二个圆与它同心，但稍微比它小一点，覆盖在第一个圆的上面。嗯，其实这个第一个圆，也要比第一步我们做的圆小一些，模拟徽章最外径和刻线之间的距离。
好了，我们动手改页面布局：
<div class="shape_box">
<div class="shape_out">
<div class="shape">
<div class="shape_in">
</div>
</div>
</div>
</div>第一个圆：shape 的样式表如下：它用来覆盖在第一步的圆上。
.shape {
position: absolute;
height: 130px;
width: 130px;
top: 5px;
left: 5px;
border-radius: 50%;
background: linear-gradient(45deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
background-size: 150%;
background-position:50% 50%;
}我们看，这个圆 shape 比第一个圆 shape_out 直径小了10px。 效果如下：
接下来，我们做本步骤里的第二个圆：shape_in ，样式表如下：
.shape_in{
position: absolute;
width: 126px;
height: 126px;
top: 2px;
left: 2px;
border-radius: 50%;
background: linear-gradient(135deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
background-size: 300%;
background-position:50% 50%;
box-shadow: inset 0px 0px 0px 1px rgba(206, 159, 72, 1.0);
}
第三步：重复上面步骤，再做两个圆，用来模拟内圈的刻线和圆形填充
按照上一步的思路，利用 shape_in 的伪类 before 和after 再同样写两个圆，覆盖在这两个圆的上面。（留个问题：为什么我不使用 shape_out 的伪类来做上一步的效果呢？ ）
.shape_in::before,.shape_in::after{
position: absolute;
content: '';
width: 91px;
height: 91px;
top: 17px;
left: 17px;
border-radius: 50%;
background-size: 300%;
background: linear-gradient(45deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
box-shadow: none;
}
.shape_in::after{
width: 87px;
height: 87px;
top: 19px;
left: 19px;
box-shadow: inset 0px 0px 0px 1px rgba(206, 159, 72, 1.0);
background: linear-gradient(135deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
}效果如果：
至此，我们金币，哦，不是金币是徽章的背景图部分就实现了。嘿嘿，其实我看着它，就觉得也可以用它做金币啊。
第四步，制作蓝色的缎带
呃，先画一个方块div：shape_text ，用蓝色渐变填充。色彩取值还是PS搞定的。然后在这个div里，输入文字：congratulat。
<div class="shape_box">
<div class="shape_out">
<div class="shape">
<div class="shape_in">
<div class="shape_text ">congratulat</div>
</div>
</div>
</div>
</div>设置：shape_text 的定位为绝对定位，通过css的top和left属性，定义它的位置。
缎带样式表如下：
/* 缎带 */
.shape_text{
position: absolute;
width: 130px;
height: 22px;
line-height: 22px;
padding: 6px 12px;
text-align: center;
font-size: 14px;
color:#fff;
font-weight: 700;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); /* 给文字加投影 */
top:45px;
left:-14px;
text-transform:uppercase; /* 字母自动修正为大写 */
background: linear-gradient(45deg, #0087c1, #009ee5, #0087c1); /* 蓝色背景渐变 */
z-index: 3;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); /* 给缎带加投影 */
}实现效果如下：
嗯，样子看起来好看了很多。不过这个缎带还差两边的折叠效果，接下来，完成两个折角。
还记得前面的 shape_out 的before 和after伪类吗？ 现在，我要用它们了。
我用 shape_out的 伪类before 和after 实现了折叠的两个蓝色渐变方块。用shape_text的伪类 before 和after 制作两个与背景色完全相同的三角形，调整到两个蓝色方块的外侧，实现视觉上的缺角效果。
/* 缎带的折叠*/
.shape_out::after,
.shape_out::before{
content: "";
position: absolute;
background: linear-gradient(270deg, #004e74, #009ee5);
background-position:0% 0%;
height: 34px;
width: 30px;
top:60px;
left:-30px;
}
.shape_out::after{
left:140px;
background: linear-gradient(90deg, #004e74, #009ee5);
z-index: 1;
}
/* 缎带的折叠上的两个缺角*/
.shape_text::before,
.shape_text::after{
content: "";
position: absolute;
border-width: 17px 17px 17px 17px;
border-style: solid;
border-color: transparent transparent transparent #eaeaea;
top:7px;
left:-24px;
}
.shape_text::after{
left:144px;
border-color: transparent #eaeaea transparent transparent ;
}
嘿嘿，到这里，基本框架就完成了。
下面，是要在徽章上输入文字。观察一下案例的图形，我先实现简单的：六颗星。
第五步：给徽章增加表面刻字。
六颗星
增加六个小星星：
为了实现六颗星的定位， 我在蓝色缎带（ shape_text ）上面和下面各放置一个div： top_star 和 under_star 。每个div里写3个五角星字符：★。（偷个懒，想要用css实现五角星的同学，可以参考我的文章：）纯CSS画标准比例的五星红旗 ，文章里详细介绍了css绘制五角星的方法。
这时候，我的结构布局是这样的：
<div class="shape_box">
<div class="shape_out">
<div class="shape">
<div class="shape_in">
<div class="top_star">
<span>★</span><span>★</span><span>★</span>
</div>
<div class="shape_text ">congratulat</div>
<div class="under_star">
<span>★</span><span>★</span><span>★</span>
</div>
</div>
</div>
</div>
</div>为什么要给每个小星星增加标签呢？ 卖个关子，后面解说。
样子这样：
哎呀，这样太丑了。接下来，我挨个美化它们。
调整星星的大小和颜色：
- 调整位置，这个简单。用css的position值设置为绝对定位，把两个层的定位写好。
- 修改文字颜色，文字投影，文字大小。
.top_star,.under_star{
position: absolute;
width: 60px;
top: 24px;
left:37px;
z-index: 3;
}
.under_star{
top: 78px;
}
.under_star span,
.top_star span{
position: relative;
font-family: "黑体";
color:#b98e26;
font-size:16px;
float:left;
display: inline-block;
text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.7);
}
.top_star span{
padding-top:2px;
}看看效果：
哇，有点意思了吧！但是，距离我想要的效果是不是还差一些？对，我们接着美化。
调整细节：
现在，你知道为什么我在前面要给每个星星增加一个标签 了吧？埋伏在这呢！
通过nth-chlid() 选择器，我可以挨个设定他们的大小和角度了。
.top_star span:nth-child(3),
.under_star span:nth-child(1){
transform: rotate(20deg);
}
.top_star span:nth-child(2),
.under_star span:nth-child(2){
font-size: 20px;
margin-top: 6px;
}
.top_star span:nth-child(2){
margin-top: -6px;
}
.top_star span:nth-child(1),
.under_star span:nth-child(3){
transform: rotate(-20deg);
}这下，小星星该如我所愿了吧？来，咱们一起看看效果：
搞定了内圈的小星星，接下来就是添加外圈文字。
外圈曲线排列的文字
思路：
外圈文字还是稍微费了些时间的。因为，我祈祷css能像AI或者PS一样，实现沿着圆形路径做个简单的文字排列，就好像PS很经典的图章效果一样。
CSS委屈的说：“ 臣妾做不到！”
“退下吧！”
看来，还得另想办法。像上面的星星旋转一样，挨个旋转。嗯，这个思路大概是可行的。
布局：
那么，先来写布局。写两个div，分别为：shape_in_top， shape_in_bottom 。给每个div里面写五个标签，然后分别。。嗨，上代码吧。
<div class="shape_box">
<div class="shape_out">
<div class="shape">
<div class="shape_in">
<div class="shape_in_top">
<span>最</span><span>酷</span><span>CSS</span><span>表</span><span>现</span>
</div>
<div class="top_star">
<span>★</span><span>★</span><span>★</span>
</div>
<div class="shape_text ">congratulat</div>
<div class="under_star">
<span>★</span><span>★</span><span>★</span>
</div>
<div class="shape_in_bottom">
<span>最</span><span>酷</span><span>CSS</span><span>表</span><span>现</span>
</div>
</div>
</div>
</div>
</div>一目了然了。
接下来，按照前面的思路写文字颜色，投影，旋转角度。
添加样式表：
/* 定义span 为大小与圆相当的正方形，用正方形的旋转实现文字的宣传 */
.shape_in_top span,
.shape_in_bottom span{
position: absolute;
display: flex;
font-family: "微软雅黑";
font-size: 12px;
font-weight: 700;
color:#000;
text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.7);
}
.shape_in_top span:nth-child(1){
transform: rotateZ(-45deg);
}
.shape_in_top span:nth-child(2){
transform: rotateZ(-25deg);
}
.shape_in_top span:nth-child(4){
transform: rotateZ(25deg);
}
.shape_in_top span:nth-child(5){
transform: rotateZ(45deg);
}
.shape_in_bottom span:nth-child(5){
transform: rotateZ(-45deg);
}
.shape_in_bottom span:nth-child(4){
transform: rotateZ(-25deg);
}
.shape_in_bottom span:nth-child(2){
transform: rotateZ(25deg);
}
.shape_in_bottom span:nth-child(1){
transform: rotateZ(45deg);
}
“你看，你看，月亮的脸偷偷的在改变。” 好好的一张脸，变得好难看！
这是哪里出了错？
仔细检查一下代码。。。喝口水，休息五分钟颈椎。
再看一遍。。。 -_-||，我没有给每个span写定位。。。难道要写10遍定位么？
喝口水，压压惊！有没有什么更好的办法呢？ 请允许我用一条虚线，表达我思考的过程。
------……------ --<>----------……--^~~#&@&#%()&)#@(%~~^----------------------~-----……------ --<>----
有了！把它们放在一个和徽章大小一样的同心容器里（一个圆），然后把他们放在圆的最顶端和最底端 ··· ···
“说人话！” 一个声音突然炸响在脑海。好吧。。
让文字在容器的水平方向居中，上面的div里，文字 顶端对其。下面的div里，文字底端对齐，然后是不是只要以图形中点为圆心，旋转文字的容器，就能实现了呢？
调整样式表，给 .shape_in_top span, .shape_in_bottom span 增加高度和宽度，让文字按照前面说的思路对齐。 （为了看明白这个思路，你需要把文字旋转的样式表先注释掉，不然你就直接见证奇迹了~）
继续调整样式表：
.shape_in_top span{
justify-content: center; /* 水平居中 */
align-items:flex-start; /* 垂直顶部对齐 */
top:1px; /* 我的容器写的比徽章的大圆小些，所以要调整容器位置，让它居于合适的位置 */
width: 125px;
height: 125px;
}
.shape_in_bottom span{
top:-1px;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7);
align-items: flex-end; /* 垂直底部对齐 */
}看看效果：
接下来，应该就没问题了。把容器旋转的样式注释去掉，我们看看容器旋转后的效果。
做到这里，一个圆形的徽章已经完成了。
接下来是给它增加类似多边形星星的效果。
第六步：增加多边形曲线外轮廓效果
看过前面知识点的同学，一定记得我要实现它的方法。对，多个圆角矩形旋转叠加。
先增加布局代码：
<div class="shape_box">
<div class="shape_out">
<div class="shape">
<div class="shape_in">
<div class="shape_in_top">
<span>最</span><span>酷</span><span>CSS</span><span>表</span><span>现</span>
</div>
<div class="top_star">
<span>★</span><span>★</span><span>★</span>
</div>
<div class="shape_text ">congratulat</div>
<div class="under_star">
<span>★</span><span>★</span><span>★</span>
</div>
<div class="shape_in_bottom">
<span>最</span><span>酷</span><span>CSS</span><span>表</span><span>现</span>
</div>
</div>
</div>
</div>
<div class="shape_black"> <!-- 多个圆角矩形旋转层叠，实现多边形轮廓 -->
<span></span><span></span><span></span>
</div>
</div>再完成CSS样式表：
/* 多个圆角矩形旋转层叠，实现多边形轮廓 */
.shape_black {
position:absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
display:block;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直底部对齐 */
}
.shape_black span{
position: absolute;
display: inline-block;
width: 120px;
height: 120px;
border-radius: 5px;
background: linear-gradient(45deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
z-index: -9;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}
.shape_black span:nth-child(1){
transform: rotateZ(30deg);
}
.shape_black span:nth-child(2){
transform: rotateZ(60deg);
}
.shape_black span:nth-child(3){
transform: rotateZ(90deg);
}
好了，徽章加缎带到这里就全部完成了，最终效果如图如下：
感谢大家读到这里，叮叮叮，没有彩蛋。。。
等吃完晚饭，我再给它加个亮闪闪的高光小星星 O(∩_∩)O
-----------------
吃完晚饭了，做了一顿肉夹馍，一口气吃了3个，好饱！来把我说的“小星星一闪一闪”补上。
补布局代码（写在 shape_box 的里面就行。）：
<div class="scroll_star">
<span class="sc_star_x"></span>
<span class="sc_star_y"></span>
<span class="sc_star_o"></span>
</div>
<div class="scroll_star2">
<span class="sc_star_x"></span>
<span class="sc_star_y"></span>
<span class="sc_star_o"></span>
</div>
<div class="scroll_star3">
<span class="sc_star_x"></span>
<span class="sc_star_y"></span>
<span class="sc_star_o"></span>
</div>样式表：
.scroll_star{
position: absolute;
width: 13px;
height: 13px;
top:17px;
left:110px;
animation: zoomInOut 2s infinite;
z-index: 99;
}
.scroll_star2{
position: absolute;
width: 13px;
height: 13px;
top:45px;
left:27px;
z-index: 99;
transform:scale(2.0);
animation: zoomInOut 2s infinite;
}
.scroll_star3{
position: absolute;
width: 13px;
height: 13px;
top:95px;
left:93px;
z-index: 99;
animation: zoomInOut 2s infinite;
transform:scale(0.7);
}
.sc_star_x,
.sc_star_y{
position: absolute;
top:5px;
left: 0px;
width: 13px; /* 椭圆的宽度 */
height: 3px; /* 椭圆的高度 */
background-image: radial-gradient(circle, #fff, #fff); /* 椭圆的填充颜色 */
border-radius: 90%; /* 边框半径，创建圆形形状 */
}
.sc_star_y{
top:0px;
left: 5px;
width: 3px;
height: 13px;
}
.sc_star_o{
position: absolute;
top:3px;
left: 3px;
width: 7px;
height: 7px;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(255, 255, 180, 0.9);
}
/* 定义放大缩小的无限循环动画 */
@keyframes zoomInOut {
0%, {
transform:scale(1.1);
opacity: 0.9;
transform:rotate(0deg);
}
50%, {
transform:scale(1.5);
opacity: 0.1;
transform:rotate(180deg);
}
100% {
transform:scale(1.1);
opacity: 0.9;
transform:rotate(360deg);
}
}
好了，小星星补上了。
---------------------------------------------------------------------------------------------------------
文章原创不易，每篇文章几乎从构思题材，到写代码，到做出教程写出来，前前后后需要四五个小时的时间。喜欢的同学，帮忙点个赞，加个收藏，谢谢啦！！！！！
“他把上厕所和吃饭喝水都算进去啦！”画外音偷偷的说。
“你滚开！” 我在脑子里怒吼一个！
“评论，一定要评论 ~ 一定要评论 ~ 评论 ~ 论~论~论~ ” 画外音歇斯底里的呼嚎声如同魔音灌顶，三日不绝！
------------------------------------------
上传资源通过了，补个链接：CSS技巧：用css绘制漂亮的徽章缎带图形.zip
