文档章节

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

leona_lily
 leona_lily
发布于 2015/04/07 09:50
字数 211
阅读 39
收藏 0
点赞 0
评论 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
博文 91
码字总数 37848
作品 0
朝阳
程序员
css的线性渐变详解

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

筱飞 ⋅ 2016/12/21 ⋅ 0

CSS3圆角详解

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

阮一峰 ⋅ 2010/12/09 ⋅ 0

CSS3 渐变(Gradients)

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

wybo521 ⋅ 2016/01/23 ⋅ 0

让CSS3圆角兼容所有的浏览器(转)

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

未来十年 ⋅ 2012/08/25 ⋅ 0

史上最完整的iOS DIY framework 详细教程

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

张志浩 ⋅ 2013/05/17 ⋅ 1

Mac os Photoshop CC 2015 初步学习

基本界面 最左边的工具栏,基本上所有的工具都在这里;最右下角的图层,是必用的; 工作区 新建任务 文件 - 新建 - 出现新窗口,常见的宽高单位请选择像素,颜色选择RGB(CMYK是用于印刷的)...

时间之友 ⋅ 01/12 ⋅ 0

兼容所有浏览器的CSS3圆角

原文: 兼容所有浏览器的CSS3圆角 译自: CSS3 rounded corners for every browser? 在各个浏览器中实现圆角的较简单快速的方案是结合CSS3和JavaScript。 CurvyCorners 是一个为HTML元素创建...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

虚拟机中安装windows server 2003忘记密码

关闭虚拟机电源; 打开工具栏上的虚拟机--》设置,选中硬盘,右下角有个实用工具,点开后选择映射; 讲“以只读模式打开文件”的默认选择去掉,单击确定,此时会出现警告的提示框,直接点击确...

蓝蝶飞扬 ⋅ 2016/02/25 ⋅ 0

给你的移动网站加点料:移动旋转菜单的实现方案

在github上看到有人用HTML5 + CSS3 + Javascript实现了jQuery Wheel Menu(旋转菜单),因为本人供职于移动网站的开发,又不是一个专业的前端开发,所以看到这么炫的东东肯定就垂涎三尺,想移...

幸福2胖纸 ⋅ 2013/08/31 ⋅ 0

javascript开发打气球小游戏

打气球.gif 效果知识点:css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等。 css代码如下:...

急速奔跑中的蜗牛 ⋅ 2017/10/29 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringCloud 微服务 (六) 服务通信 RestTemplate

壹 通信的方式主要有两种,Http 和 RPC SpringCloud使用的是Http方式通信, Dubbo的通信方式是RPC 记录学习SpringCloud的restful方式: RestTemplate (本篇)、Feign 贰 RestTemplate 类似 Http...

___大侠 ⋅ 5分钟前 ⋅ 0

React创建组件的三种方式

1.无状态函数式组建 无状态函数式组件,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑。 无状态函数式组...

kimyeongnam ⋅ 11分钟前 ⋅ 0

react 判断实例类型

今天在写组件的时候想通过判断内部子元素不同而在父元素上应用不同的class,于是首先要解决的就是如何判断子元素的类型。 这里附上一个讲的很全面的文章: https://www.cnblogs.com/onepixel...

球球 ⋅ 18分钟前 ⋅ 0

Centos7备份数据到百度网盘

一、关于 有时候我们需要进行数据备份,如果能自动将数据备份到百度网盘,那将会非常方便。百度网盘有较大的存储空间,而且不怕数据丢失,安全可靠。下面简单的总结一下如何使用 bypy 实现百...

zctzl ⋅ 32分钟前 ⋅ 0

开启远程SSH

SSH默认没有开启账号密码登陆,需要再配置表中修改: vim /etc/ssh/sshd_configPermitRootLogin yes #是否可以使用root账户登陆PasswordAuthentication yes #是都开启密码登陆ser...

Kefy ⋅ 35分钟前 ⋅ 0

Zookeeper3.4.11+Hadoop2.7.6+Hbase2.0.0搭建分布式集群

有段时间没更新博客了,趁着最近有点时间,来完成之前关于集群部署方面的知识。今天主要讲一讲Zookeeper+Hadoop+Hbase分布式集群的搭建,在我前几篇的集群搭建的博客中已经分别讲过了Zookeep...

海岸线的曙光 ⋅ 42分钟前 ⋅ 0

js保留两位小数方法总结

本文是小编针对js保留两位小数这个大家经常遇到的经典问题整理了在各种情况下的函数写法以及遇到问题的分析,以下是全部内容: 一、我们首先从经典的“四舍五入”算法讲起 1、四舍五入的情况...

孟飞阳 ⋅ 今天 ⋅ 0

python log

python log 处理方式 log_demo.py: 日志代码。 #! /usr/bin/env python# -*- coding: utf-8 -*-# __author__ = "Q1mi""""logging配置"""import osimport logging.config# 定义三种......

inidcard ⋅ 今天 ⋅ 0

mysql 中的信息数据库以及 shell 查询 sql

Information_schema 是 MySQL 自带的信息数据库,里面的“表”保存着服务器当前的实时信息。它提供了访问数据库元数据的方式。 什么是元数据呢?元数据是关于数据的数据,如数据库名或表名,...

blackfoxya ⋅ 今天 ⋅ 0

maven配置阿里云镜像享受飞的感觉

1.在maven目录下的conf/setting.xml中找到mirrors添加如下内容,对所有使用改maven打包的项目生效。 <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.al......

kalnkaya ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部