文档章节

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

leona_lily
 leona_lily
发布于 2015/04/07 09:50
字数 211
阅读 71
收藏 0

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来实现打斜的背景

© 著作权归作者所有

共有 人打赏支持
leona_lily
粉丝 9
博文 97
码字总数 39219
作品 0
朝阳
程序员
css的线性渐变详解

渐变背景一直以来在Web页面中都是一种常见的视觉元素。但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中。Web页面上实现的效果,仅从...

筱飞
2016/12/21
14
0
CSS3圆角详解

CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角。 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习。以下就是我翻译的中文...

阮一峰
2010/12/09
0
0
CSS3 渐变(Gradients)

CSS3 渐变(gradients)可以让您在两个或多个指定的颜色之间显示平稳的过渡。 以前,您必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),您可以减少下载的事件和宽带的使...

wybo521
2016/01/23
2
0
让CSS3圆角兼容所有的浏览器(转)

CSS3出现以后,WEB前端的美化变得更加容易,一些原本要用图片才能实现的外观,现在用样式表就可以搞定,也因而使得页面变得更小。但令人头疼的是CSS3的很多属性并不被所有的浏览器支持。本人...

未来十年
2012/08/25
0
0
史上最完整的iOS DIY framework 详细教程

直接看步骤 废话不多说,哈哈! 1、新建一个静态库工程: 2:取自己喜欢的名字: 3、删除向导所生成工程中的 Target: 3、删除TestFrameWork对应的工程文件夹: 5:删除bulid 关连项 选择左下...

张志浩
2013/05/17
0
1

没有更多内容

加载失败,请刷新页面

加载更多

白话SpringCloud | 第十章:路由网关(Zuul)进阶:过滤器、异常处理

前言 简单介绍了关于Zuul的一些简单使用以及一些路由规则的简单说明。而对于一个统一网关而言,需要处理各种各类的请求,对不同的url进行拦截,或者对调用服务的异常进行二次处理等等。今天,...

oKong
20分钟前
1
0
详解nohup和& 区别

详解nohup和& 区别 2017年11月29日 16:57:38 King-Long 阅读数:7266 版权声明:本文为博主原创文章,欢迎转载。 https://blog.csdn.net/u011095110/article/details/78666833 nohup 一、【解...

linjin200
32分钟前
3
0
Character的static方法

基本类型char的包装类是Character,使用的比较多,大家是比较熟悉的。 我只是觉得里面有很多static方法,平时不怎么用,学习一下怎么实现的,或许日后就用到了。 static int compare(char x,...

woshixin
32分钟前
1
0
正则介绍_sed

10月17日任务 9.4/9.5 sed sed工具 匹配打印 -n 只打印匹配行,不然其他行也会打印出来 p 打印(配合-n使用) [root@centos7 tmp]# sed -n '/root/'p passwd root:x:0:0:root:/root:/bin/ba...

robertt15
33分钟前
2
0
轻松解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码

轻松解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码 2013年05月22日 15:18:05 秋实先生 阅读数:14826 这里解码百度访问统计代码构造函数为示例: 百度访问统计代码JavaScript源码:...

_纵横捭阖_
41分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部