文档章节

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

leona_lily
 leona_lily
发布于 2015/04/07 09:50
字数 211
阅读 43
收藏 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
博文 96
码字总数 37848
作品 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 SpringBoot mybatis分布式Web应用的统一异常处理

我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况。Spring Boot提供了一个默认的映射:/error,当处理中抛出异常之后,会转到该请求中处理,并且该请求有一个全局的错误页面用...

itcloud
17分钟前
0
0
c++ std::bind和std::function

定义于头文件 <functional> std::bind 函数绑定,https://zh.cppreference.com/w/cpp/utility/functional/bind // bind 用例#include <iostream>#include <functional> // 自定义的一......

SibylY
20分钟前
0
0
SecureCRT的安装与破解(过程很详细!!!)

SecureCRT的安装与破解(过程很详细!!!) SecureCRT的安装与破解(过程很详细!!!) 使用SecureCRT可以方便用户在windows环境下对linux主机进行管理,这里为大家讲一下SecureCRT的破解方...

DemonsI
24分钟前
0
0
介绍几款可用的web应用防火墙

目前有两款,基于软件和基于应用程序的web应用防火墙。基于软件的产品布置在Web服务器上,而基于应用程序的产品放置在Web服务器和互联网接口之间。两种类型的防火墙都会在数据传入和传出web...

上树的熊
31分钟前
1
0
用Visual Studio开发以太坊智能合约

区块链和以太坊 自从我熟悉区块链、以太坊和智能合约以来,一直失眠。 我一直在阅读,阅读和阅读,最后我能够使用一些工具,他们建议使用以太坊网站官方客户端应用程序(Ethereum Wallet)也...

geek12345
33分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部