CSS 实现对号效果
实现对号效果,一种思路是利用现成的符号,直接在网上搜索到 √,插入页面。另一种思路是本文要介绍的用 CSS 实现,思路是:
给块级元素设置宽度和高度
设置元素相邻的两个 border
旋转元素
HTML
<div class="check-style-unequal-width"></div>
解析
此处需要使用块级元素
不需要设置元素内容
CSS
.check-style-unequal-width {
width: 8px;
height: 16px;
border-color: #009933;
border-style: solid;
border-width: 0 3px 5px 0;
transform: rotate(45deg);
}
解析
设置宽度和高度,得出一个矩形效果,并且矩形中没有内容
设置相邻 border 的样式,得到对号的大体轮廓
使用旋转属性,成功得到对号
解析
如上图,第一个为两条线等宽的对号效果,第二个为两条线不等宽的对号效果;第三个为两条线等宽等长的对号效果。详细实现请参见 check 源码。
注意事项
行级元素直接设置宽度和高度没有用,需要设置其 display 使其变为块级元素。例如:span 需要设置 display 为 inline-block 才能适用于本例效果
可以根据实际需求调整元素宽度和高度
可以根据实际需求设置不同的 border,以及相邻 border 的宽度
可以对此效果做简单的修改,作用于伪元素 ::before 和 ::after。可参考 ::before & ::after
---------------------
作者:南张人
来源:CSDN
原文:https://blog.csdn.net/u011848617/article/details/82824054
CSS 实现对号效果的更多相关文章
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- 利用target的特性,可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- CSS 边框 阴影 效果
CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...
- Css实现透明效果,兼容IE8
Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...
- HTML与CSS简单页面效果实例
本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...
- css 实现评分效果
css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由 background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...
- 纯 CSS 实现波浪效果!
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
- React 系列教程 1:实现 Animate.css 官网效果
前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...
随机推荐
- Vue大概知识体系和学习参考
Vue大概知识体系和学习参考文档 官方文档学习,参考,借鉴地址:https://cn.vuejs.org/v2/guide/installation.html 菜鸟教程:https://www.run ...
- ADO与达梦7产生的一个未知问题
采用OLEDB与达梦7建立数据库连接 连接成功 查询表成功 打开表成功 当进行到addnew 操作时 报异常,未知错误 而且是仅针对这张表 ,其他表都没有问题 当清空数据后可以再插入一次数据,之后就 ...
- 如何使用classnames模块库为react动态添加class类样式
摘要 在react中添加动态的css时,传统的方式较为繁琐,今天刚好学习到一个模块库可以便捷的解决这个问题.对的,它就是“classnames”. classnames模块库 npm安装 npm in ...
- TypeScript入门二:基本数据类型
浅析基本数据类型 TypeScript类型解析 一.浅析基本数据类型 首先有一个问题TypeScript是一门编译型语言?还是解释性语言?显然已经不能被这两个分类来区分,TypeScript的并不是为 ...
- SmartBinding with kbmMW #4
前言 在前面写过的文章中,详细介绍过如何将各种的控件与数据源进行绑定(Bind).在这篇文章中,将重点讨论如何绑定TImage和TListView.(同时支持VCL与Firemonkey). 将图形数 ...
- tensorflow保存数据为.pb格式和加载pb文件
转自:https://blog.csdn.net/u014264373/article/details/79943389 https://blog.csdn.net/fu6543210/article ...
- Socket问题
http://www.cnblogs.com/mareymarey111/archive/2011/12/08/2280253.html
- Python 实现快递查询
实现效果: 源代码: import urllib.request import json import msvcrt kd_dict = {1:'shentong',2:'youzhengguonei ...
- Ubuntu系统---FeiQ安装记录
Ubuntu系统---FeiQ安装记录 linux下安装飞秋/飞鸽传书之类的软件iptux信使,可以与windows在一个局域网下聊天与传书文件,安装很简单. 首先,直接运行下面的语句即可:sudo ...
- shell字符串处理
一.字符串切片: ${#var}:返回字符串变量var的长度${var:offset}:返回字符串变量var中从第offset个字符后(不包括第offset个字符)的字符开始,到最后的部分,offse ...