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>

赞 (0)

相关推荐

  • css制作放大缩小图标;css制作放大镜

    浏览器商城网站,会发现很多商城图片都是可以放大进行查看图片细节部分,采用放大镜缩小图标代替文字可以给予用户更好的体验效果.放大缩小图标其实可以直接使用css进行制作.(注意:最后一个步骤含有小图标所有 ...

  • excel表格如何输入制作打钩方块

    很多朋友会问excel在方框里面怎么打钩,其实很简单,是没有找对地方,在excel符号里就有,插入打钩符号即可,下面跟着我一步步操作肯定可以找到. 1.首先,我们需要在电脑上打开一个空白的excel文 ...

  • 如何在PS Photoshop上制作downloading的图标

    如何在PS Photoshop上制作downloading的图标

    今天给大家介绍一下如何在PS Photoshop上制作downloading的图标的具体操作步骤.1. 我们先打开电脑上的PS软件,然后新建一个像素为680*520的画布,颜色设置为灰色弱渐变,接着用 ...

  • 如何通过AI制作压缩文件图标

    如何通过AI制作压缩文件图标

    AI是一款功能强大的在线图像矢量插画软件,有些用户想知道如何通过AI制作压缩文件图标,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑中的AI软件,根据下图所示,按照需求新 ...

  • 制作一个镂空图标【ps教程】

    今天教大家制作一个镂空图标,看似简单,实际动起手来却并不容易,密密麻麻的小点并不是任意排列,是有规律可循的.一起来学习下吧~哦,对了,密恐的朋友慎入! 今天的教程来自 P大点S 的 Projava ! ...

  • 如何用PS 制作书本小图标

    PS软件主要应用到图片处理.文字排版.图形设计.网页设计.建筑效果图的修饰等多个方面.广泛应用到影像创意.文艺设计.平面设计.网络媒体等多个领域.用PS软件可为设计书籍封面,包括书籍封面右侧图标.所以 ...

  • PS制作电池电量图标

    PS制作电池电量图标 操作方法 01 打开PS新建一个画布,大小自己设置,然后选择矩形工具,填充设置为白色,描边设置一个颜色和大小,然后在画布中绘制一个矩形,如图 02 然后ctrl+j复制矩形,ct ...

  • Photoshop教程：教你制作质感水晶图标

    Photoshop在质感表现方面的功能是非常惊人的,无论你今天才开始接触还是对它早有研究,这一点都无法否认(可能理解层次上会有所差异).从这个意义来说,你也许永远都无法知道它究竟"不能&qu ...

  • 教你用photoshop制作金牌小图标

    教你用photoshop制作金牌小图标 操作方法 01 新建文件,给背景填充你喜欢的颜色 02 选择椭圆形工具,按Shift键,画一个正圆,命名为[金牌厚度],填充颜色 03 选择[金牌厚度]图层,C ...