CSS3基础CSS制作网店打折图标(锯齿图标)简单步骤

CSS制作网店打折图标(锯齿图标)简单步骤

网店里经常会用到一些优惠秒杀或打折信息的类似齿轮形状的图标,例如下图就是几个常见的样式:

CSS网店打折图标.png

第一个图标目测是由三个圆角矩形叠加形成的,所以实现的方法很简单,使用2D旋转就可以了,下面是html部分:

<div id="wrap">
 <div class="text">秋冬新款</div>
</div>

这里定义父元素为一个圆角正方形,通过伪元素再创建两个同样的正方形并分别旋转60度和-60度,即可得到图标的样式了:

<style type="text/css">
#wrap {
 margin:100px;
 position:relative;
 color:#70b;
}
#wrap,#wrap:before,#wrap:after {
 background-color:currentColor;
 width:100px;height:100px;border-radius:10px;
}
#wrap:before {
 content:" ";
 position:absolute;left:0;right:0;top:0;bottom:0;
 transform:rotate(60deg)
}
#wrap:after {
 content:" ";
 position:absolute;left:0;right:0;top:0;bottom:0;
 transform:rotate(-60deg)
}
.text {
 position:absolute;z-index:2;
 font-size:34px;font-weight:bold;color:#fff;
 transform:rotate(-10deg);text-align:center;
}
</style>

如果给这几个正方形加上边框,便能清楚的看到叠加的过程:

CSS制作网店图标.png

第二个图标和第一个是差不多的,只是锯齿数量多一些,相对来说多用几个正方形叠加就可以了,html部分为:

<div id="wrap">
 <div class="serr1"></div>
 <div class="serr2"></div>
 <div class="text">全场<br />五折</div>
</div>

这里也需要通过2D旋转,通过角度的设置来实现这些正方形的叠加:

<style type="text/css">
#wrap {
 margin:100px;
 position:relative;
 width:95px;height:95px;
 border-radius:50%;
}
.serr1,.serr2,
.serr1:before,.serr1:after,
.serr2:before,.serr2:after {
 position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;
 width:85px;height:85px;background-color:#5a7;
}
.serr1:before {
 content:" ";transform:rotate(60deg);
}
.serr1:after {
 content:" ";transform:rotate(-60deg);
}
.serr2 {
 transform:rotate(75deg);
}
.serr2:before {
 content:" ";transform:rotate(60deg);
}
.serr2:after {
 content:" ";transform:rotate(-60deg);
}
.text {
 position:absolute;left:0;right:0;top:6px;z-index:2;
 font-size:28px;font-weight:bold;color:#fff;
 transform:rotate(-15deg);text-align:center;
}
</style>

同样的,如果给这些正方形设置不同的背景,便能清楚的看到叠加的过程:

CSS制作网店图标2.png

第三个图标的边缘是圆形的,这里通过块阴影属性就可以简单的实现,html部分是:

<div id="wrap">
 <div class="text">模特实拍</div>
</div>

CSS阴影属性可以设置多个值,所以这里很轻松的就能获得很多“小圆形”:

<style type="text/css">
#wrap {
 margin:100px;position:relative;color:#e35;
}
#wrap,#wrap:before,#wrap:after {
 width:100px;height:100px;
 border-radius:50%;
 box-shadow:35px 35px 0 -30px currentColor,
 -35px -35px 0 -30px currentColor,
 35px -35px 0 -30px currentColor,
 -35px 35px 0 -30px currentColor;
}
#wrap:before,#wrap:after {
 content:" ";
 position:absolute;left:0;right:0;top:0;bottom:0;
}
#wrap:before {
 transform:rotate(60deg);
}
#wrap:after {
 background-color:currentColor;
 transform:rotate(-60deg);
}
.text {
 position:absolute;z-index:2;
 text-align:center;
 font-size:34px;font-weight:bold;color:#fff;
 transform:rotate(-10deg);
}
</style>

如果将阴影属性的第三个值设置为0,则可以实现复制该元素的效果,第四个值相当于设置复制的比例,所以这里通过阴影复制的方法获得大圆周边的一些小圆图案,阴影属性的前两个值设置复制后的图案的位置,这里如果将上面的阴影属性适当更改,比如:

 box-shadow:55px 55px 0 -40px currentColor,
 -55px -55px 0 -40px currentColor,
 55px -55px 0 -40px currentColor,
 -55px 55px 0 -40px currentColor;

CSS制作网店图标3.png

这个类似太阳的图案和《使用CSS阴影属性简单实现太阳图案》这篇文章的方法完全相同的。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/157.html