最近在博客园看到某人发的baidu校招题目，说是要用一行html代码实现下面的这个图形：

　　　　　　　　　　

　　给定的html代码是： <div class='square'></div>

　　-----------------------以上为背景------------------------------

　　　

　　 正方形当然很好做，但是右侧突出来的小角标就得自己想办法了。所以，既然没有到有，自然是用上了CSS中的伪元素。

　　这个形状跟我们平时经常遇到的小气泡和下拉栏差不多

　　

　　平常实现我们常是通过添加小的icon来实现，不仅需要添加图片资源，还需要改动html结构。

　　CSS伪元素

　　css中伪元素有四个，分别是:first-line,:first-letter,:before,:after。其中前两个分别选择的是目标元素内第一行文本和第一个字母，可以为其添加多余样式。

　　而最常用的就是:before和:after，这两个伪元素与前两个的用法不同，而用处也更大。

　　:before,:after分别用于向当前元素前和后添加指定的content内容，具体事例用法如下：

　　

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS输出各种图形</title>

<style type="text/css">

    p:before{

        content:"开始";

        color:#F00;

        font-size:12px;

    }

    p:after{

        content:"结束";

        color:#003;

        font-size:30px;

        border:1px solid #000;

        width:100px;

    }

</style>

</head>

<body>

    <p>伪元素 测试</p>

</body>

</html>

　　　　上面代码的运行结果如图：  

　　　　可以认为:before和:after两个伪元素是添加到当前p标签前后的两个元素，但是应该也会发现在p:after中写的width:100px;并没有奏效，这就说明了伪元素的显示是inline的，而不是block。

　　　　至于伪元素有几个需要注意的地方：

　　　　1.伪元素在元素内部的显示为inline，因此想要用伪元素实现更多效果，比如上面的题目，就必须把伪元素当做block元素来用。

　　　　2.伪元素列表属性中content必不可少，即使内容为空，content也不能为空，否则会不显示。

　　　　3.伪元素content除了可以设置为文字之外，还可以设置为图片，例如p:before{content:url(icon.gif);}

　　　　4.伪元素目前已经得到IE8及以上浏览器，可以放心使用。

　　　　用CSS做出来一个三角形或者别的形状

　　　　掌握了伪元素之后，就可以实现上面的题目了。很明显，是通过伪元素做出了一个三角形。怎么做呢？

　　　　用CSS代码实现三角形很简单，尝试一下就可以写出来：，html代码为<div class="triangle"></div>, css代码如下

　　　　.trangle{width:0;height:0;border:40px solid; border-color:transparent transparent transparent #F00;}

　　　　别的形状也是大同小异，通过设置不同的border-radius和border-width来实现，但是兼容性有问题，IE9及以上才会正常（自然是border-radius的问题）。

　　　　

　　　　但是可以看出来元素已经是用border勾勒出来的了，但是题目中的三角形是带有黑色边框的，很明显不能通过一个伪元素来搞定，那就两个一起。

　　　　通过设定伪元素的position:absolute和z-index属性，构成伪元素的叠加，底层是黑色，上层是白色即可。

　　　　原题目的CSS具体实现代码如下：

.square{width:100px;height:100px;background-color:#FFF;position:relative;border:2px #000000 solid;}

.square:before{

content:"";

width:0px;

height:0px;

display:block;

position:absolute;

z-index:;

top:25%;

right:-28px;

border:15px solid #FFF;

border-color:transparent transparent transparent #FFF;

}

.square:after{content:"";

width:0px;

height:0px;

display:block;

position:absolute;

z-index:;

top:25%;

right:-30px;

border:15px solid #FFF;

border-color:transparent transparent transparent #000;

}

　　　　　　

　　　　当然，也可以实现一些更复杂的图形，比如下面两个：（左边的太极是截图，右边的百事是写着测试的）

　　　　太极：                                    百事Logo:                         IE8下的百事Logo(23333):

　　　　

　　　　恩，就是这样，具体怎么用，见仁见智了。

　　　　---------------------------结束了---------------------------------

　　　　到了大三课也少了，外包也少了，没事看点书、写点好玩的，一边准备明年实习校招，一边当巩固基础了。

　　　　

[CSS]利用伪元素实现一些特殊图形 from baidu校招的更多相关文章

  1. [CSS]利用伪元素实现一些特殊图形

    给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...

  2. 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式

    最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...

  3. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

  4. CSS的伪元素（二）

    随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...

  5. css的伪元素

    这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...

  6. 笑谈CSS的伪元素

    今晚上我们来简单的聊一聊CSS的伪元素,多说无益,开聊 GG: 话说盘古开天辟地之时. QQ:嗨,咱今天还能讲的完吗?您给来点实际的啊. GG:要听实际的是吧,得嘞,那今天咱就来聊一聊CSS里的伪元素 ...

  7. css的伪元素 ::after ::before 和 图标字体的使用

    浅谈css的伪元素::after和::before   css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...

  8. HTML&CSS基础-伪元素选择器

    HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  9. CSS 的伪元素是什么？

    CSS伪元素是用来添加一些选择器的特殊效果.用于:向某个选择器中的文字的首行. ㈠语法 ①伪元素的语法: selector:pseudo-element {property:value;} ②CSS类 ...

随机推荐

  1. kali中的中国菜刀weevely

    weevely是一个kali中集成的webshell工具,是webshell的生成和连接集于一身的轻量级工具,生成的后门隐蔽性比较好,是随机生成的参数并且加密的,唯一的遗憾是只支持php,weevel ...

  2. LUA upvalue使用陷阱一例

    CA = {} CA.TestCb = function(self, cb) if not self._cb then self._cb = function() cb() end end self. ...

  3. 【POJ1509】Glass Beads 【后缀自动机】

    题意 给出一个字符串,求它的最小表示法. 分析 这个题当然可以用最小表示法做啦!但是我是为了学后缀自动机鸭! 我们把这个字符串长度乘二,然后建SAM,然后在SAM上每次跑最小的那个字母,找出长度为n的 ...

  4. @EnableAsync annotation metadata was not injected Spring容器启动后访问Servlet报错

    @EnableAsync annotation metadata was not injected 2015年12月20日 20:06:54 7570 在初始化spring事务部分碰到该错误, 详细错 ...

  5. 通过snmp监控linux

    一.linux snmpd安装 yum install -y net-snmp net-snmp-utils 二.snmp的配置(vim /etc/snmp/snmpd.conf) com2sec n ...

  6. [C++] the pointer array & the array's pointer

    int *p[4]------p是一个指针数组,每一个指向一个int型的int (*q)[4]---------q是一个指针,指向int[4]的数组 --> type: int(*)[4] vo ...

  7. sed高级用法：模式空间(pattern space)和保持空间(hold space)

    摘自:https://blog.csdn.net/ITsenlin/article/details/21129405 sed高级用法:模式空间(pattern space)和保持空间(hold spa ...

  8. 实践作业4---DAY5阶段四。

    阶段四:分析 这一阶段工作就是分析博客园与csdn优点缺点: 根据邹欣老师在<现代软件工程>一书中的描述: 程序 = 算法 + 数据结构: 软件 = 程序 + 软件工程(软件服务还有数据, ...

  9. 白盒测试实践-任务进度-Day04

    所使用静态代码检查工具 阿里巴巴Java开发代码检测IDE插件 小组成员 华同学.郭同学.覃同学.刘同学.穆同学.沈同学 任务进度 对大家完成各自任务情况进行询问后,以下是对小组成员完成任务进度的情况 ...

  10. [GO]方法值和方法表达式

    package main import "fmt" type Person struct { name string sex byte age int } func (p Pers ...