css3制作选中的右下角小对号

2019独角兽企业重金招聘Python工程师标准>>>

html的代码如下

<div class="t3"><div class="cur">100元<i></i></div><div>200元</div><div>500元</div><div>1000元</div></div>

css的代码

.t3 div.cur i {display: block;position: absolute;border-bottom: 15.4px solid #c00;border-left: 2rem solid transparent;width: 0px;height: 0px;bottom: 0rem;right: 0;}.t3 div.cur i:after {position: absolute;content: '\2714';color: #fff;left: -1rem;top: -0.7rem;font-size: 1.2rem;}

效果图：

解释：

after是css3的新特性，直接在css里面设置，就会自动在i标签的后面来设置属性内容，其中content的‘\2714’是图片里面的白色对号，然后位置在相对固定一下就出来效果了；

而针对他的打斜背景想了好久，最后发现是通过i标签来控制的，然后通过是指border-bottom和border-left来实现打斜的背景

转载于:https://my.oschina.net/leonaLily/blog/396741

css3制作选中的右下角小对号相关推荐

Appgamekit制作消消乐小游戏（附代码）# 1
Appgamekit制作消消乐小游戏(附代码)# 1 其实作者我也是刚刚才接触的Appgamekit,而且以前我是学C/C++的,所以我学的东西拿来这里就只有代码的结构思路会清晰一点了.(但是思路其实 ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
python打字_使用Python制作一个打字训练小工具
一.写在前面说道程序员,你会想到什么呢?有人认为程序员象征着高薪,有人认为程序员都是死肥宅,还有人想到的则是996和 ICU. 别人眼中的程序员:飞快的敲击键盘.酷炫的切换屏幕.各种看不懂的字符代码 ...
Css3制作三角形图标
在建站过程中,有时候需要给部分容器添加装饰效果,这样就会添加小图标,今天和大家分享用Css3制作三角形图标. 在Css3之前,我们使用transparent属性来实现背景颜色透明,在CSS3中我们使用 ...
PS制作一个百度的小熊掌LOGO
这篇教程是向脚本之家的朋友分享PS制作一个百度的小熊掌LOGO方法,教程比较基础,很简单,适合新手来学习,推荐到脚本之家,喜欢的朋友可以参考本文,来看看吧大家每天都用会百度,有没有想过自己制作一个百 ...
怎么能免费制作自己的微信小程序？
怎么能免费制作自己的微信小程序? 看下方,小程序的制作有以下四种主要方式: 免费小程序(这里分为三种小程序类型,1.个人小程序2.个体小程序3.企业小程序) [一般个人小程序的话不建议申请,因为权限接 ...
小福利，用excel制作旋风图，小狗图和漏斗图
小福利,用excel制作旋风图,小狗图和漏斗图第一部分制作旋风图最终效果如下图所示步骤如下: 第一步,选中三列数据插入堆积柱状图第二步,选中橙色柱子,加次坐标轴第三步,改橙色柱子坐标轴尺度范 ...
纯css3制作简易钟表时钟
使用css3制作简易钟表效果 html代码 <div class="clock" ><div class="hour ...
python +pygame 制作五子连珠小游戏
python +pygame 制作五子连珠小游戏学习python半年了,今天分享一个利用pygame制作的五子连珠游戏. 一.代码: 1.球类,ball.py """ ...

css3制作选中的右下角小对号

css3制作选中的右下角小对号相关推荐

最新文章

热门文章