css制作打钩图标

css制作打钩图标

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

打开html开发软件，新建一个html文件。如图：

在新建的html代码页面，创建一个div标签，同时给这个标签添加一个class类，案例中class为 icon-true 。 如图：

创建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

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

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

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

页面所有代码。可以直接复制所有代码粘贴到新建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 /html2023-09-18