多语言展示
当前在线:1139今日阅读:84今日分享:32

css制作打钩图标

css样式表定义用于定义html元素显示样式。css3新增了一个transform属性,可以直接通过这个属性制作“√”小图标。(最后一个步骤存放了所有代码)思路:“√”图标 = 一个选中45度的矩形 - 左边和顶部的边框
方法/步骤
1

打开html开发软件,新建一个html文件。如图:

2

在新建的html代码页面,创建一个

标签,同时给这个标签添加一个class类,案例中class为 icon-true 。 如图:

3

创建

4

保存html代码,使用浏览器打开,查看设置右边距和下边距的矩形是否创建成功。如图:

5

回到html代码页面,对icon-true类添加transform,使用transform设置矩形旋转45度。如图:css代码:-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);

6

保存html代码,使用浏览器打开,即可看到浏览器上存在一个打钩的小图标。如图:

7

页面所有代码。可以直接复制所有代码粘贴到新建html文件上,保存后运行即可看到打钩小图标。所有代码: 打钩小图标

推荐信息