css制作打钩图标
css样式表定义用于定义html元素显示样式。css3新增了一个transform属性,可以直接通过这个属性制作“√”小图标。(最后一个步骤存放了所有代码)
思路:“√”图标 = 一个选中45度的矩形 - 左边和顶部的边框
操作方法
- 01
打开html开发软件,新建一个html文件。如图:
- 02
在新建的html代码页面,创建一个<div>标签,同时给这个标签添加一个class类,案例中class为 icon-true 。 如图:
- 03
创建<style>标签,设置 icon-true 类样式。创建一个矩形,然后设置这个矩形的右边框和下边框。如图: css样式代码: <style> .icon-true{ width:40px; height: 70px; border-bottom: 2px solid #aaa; border-right: 2px solid #aaa; margin:20px auto; } </style>
- 04
保存html代码,使用浏览器打开,查看设置右边距和下边距的矩形是否创建成功。如图:
- 05
回到html代码页面,对icon-true类添加transform,使用transform设置矩形旋转45度。如图: css代码: -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);
- 06
保存html代码,使用浏览器打开,即可看到浏览器上存在一个打钩的小图标。如图:
- 07
页面所有代码。可以直接复制所有代码粘贴到新建html文件上,保存后运行即可看到打钩小图标。 所有代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打钩小图标</title> <style> .icon-true{ width:40px; height: 70px; border-bottom: 2px solid #aaa; border-right: 2px solid #aaa; margin:20px auto; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } </style> </head> <body> <div class="icon-true"></div> </body> </html>