核心思想：嵌套盒子中的◇超过父盒子的部分隐藏。

第一种写法：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        div{

            width:100px;

            height:30px;

            background-color:#eee;

            position:relative;

        }

        i,s{

            text-decoration:none;

            font-style:normal;

        }

        i{

            position:absolute;

            right:0;

            top:12px;

            width:10px;

            height:7px;

            background-color:aliceblue;

            font:400 13px/13px "微软雅黑";

            overflow:hidden;

        }

        s{

            position:absolute;

            top:2px;

        }

    </style>

</head>

<body>

    <div>

        <i><s>◇</s></i>

    </div>

</body>

</html>

第二种写法：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        div{

            width:100px;

            height:30px;

            background-color:#eee;

            position:relative;

        }

        i,s{

            text-decoration:none;

            font-style:normal;

        }

        i{

            position:absolute;

            right:0;

            top:12px;

            width:10px;

            height:7px;

            background-color:aliceblue;

            font:400 13px/13px "微软雅黑";

            overflow:hidden;

        }

        s{

            display:block;

            margin-top:-6px;

        }

    </style>

</head>

<body>

    <div>

        <i><s>◇</s></i>

    </div>

</body>

</html>

效果：

注释：s标签必须转成块级元素，display的值必须是block。

CSS——◇demo的更多相关文章

  1. 【CSS Demo】纯 CSS 打造 Flow-Steps 导航

    low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三   通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...

  2. 【CSS Demo】网站页面变灰

    让网站所有元素变成灰色调,全浏览器支持,使用了滤镜,比较吃性能,建议作临时方案使用. 实现效果(点击下面的按钮): 这里放一张图片作为效果展示: 其CSS代码如下: body{ -webkit-fil ...

  3. CSS demo:flaot &amp; clear float

    1,首先,我们布局主要的div块: 例如以下代码所看到的,我们在body里面写3几个基本div块,然后设置一些基本属性: 效果图: 2,增加基本浮动 如今我们想让红色div放到绿色div右边,我们在两 ...

  4. Less:优雅的写CSS代码

    css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或 ...

  5. CSS Hack技术介绍及常用的Hack技巧集锦

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  6. Html标签第二课css

    css(Cascading Style Sheet)叠层样式表.用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 一:样式三种控制方法 1.行内样式: <div  style=& ...

  7. 常用的CSS Hack

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  8. css font-weight原理

    为什么要记录一下?因为今天我要设置一个字符加粗,然后就用font-weight:200,没有任何效果.现在看来很可笑,400才相当于normal,200怎么加粗,奇怪的是也没有变细.所以得研究一下fo ...

  9. HTML 学习笔记 CSS样式（文本）

    CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...

随机推荐

  1. linux 设置root可以远程登陆

    编辑/etc/ssh/sshd_config 设置 PermitRootLogin yes 重启ssh 服务 ubuntu service ssh start

  2. HDOJ 5402 Travelling Salesman Problem 模拟

    行数或列数为奇数就能够所有走完. 行数和列数都是偶数,能够选择空出一个(x+y)为奇数的点. 假设要空出一个(x+y)为偶数的点,则必须空出其它(x+y)为奇数的点 Travelling Salesm ...

  3. HR系统-人员申请单

    部门在人员缺失时,须要进行人员申请, 申请会涉及到单据的建立及审核.单据建立界面例如以下:

  4. 数据结构之中序遍历转兴许遍历（JAVA实现）（二）

    算法流程: 主要分为四步: 1.当前字符为数字或者字母,则直接输出 2.当前字符为).则在栈中匹配输出.一直匹配到),则停止输出(就是将)及其顶上的元素所有弹出来输出) 3.当前字符为操作符.则比較当 ...

  5. ios block 内存管理时使用注意

    XMGStudent *stu = [[XMGStudent alloc] init]; __weak XMGStudent *weakStu = stu; stu.block = ^{ NSLog( ...

  6. Codeforces--618A--Slime CombiningCrawling（数学）

     Slime CombiningCrawling in process... Crawling failed Time Limit:2000MS     Memory Limit:262144KB ...

  7. python库学习笔记——Pandas数据索引：ix、loc、iloc区别

    Different Choices for Indexing 1. loc--通过行标签索引行数据 1.1 loc[1]表示索引的是第1行(index 是整数) import pandas as pd ...

  8. 洛谷P2059 [JLOI2013]卡牌游戏

    题目描述 N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字为X,则庄家首先把 ...

  9. java普通代码块、静态代码块、默认构造方法的执行顺序

    package test; class Parent{ { System.out.println("父类普通代码块"); } static{ System.out.println( ...

  10. 【转载】Java中Comparable和Comparator比较

    [本文转自]http://www.cnblogs.com/skywang12345/p/3324788.html Comparable 简介 Comparable 是排序接口. 若一个类实现了Comp ...