[CSS]利用伪元素实现一些特殊图形 from baidu校招
最近在博客园看到某人发的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校招的更多相关文章
- [CSS]利用伪元素实现一些特殊图形
给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...
- 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式
最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...
- HTML和CSS设置动态导航以及CSS中伪元素的简单说明
HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...
- CSS的伪元素（二）
随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...
- css的伪元素
这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...
- 笑谈CSS的伪元素
今晚上我们来简单的聊一聊CSS的伪元素,多说无益,开聊 GG: 话说盘古开天辟地之时. QQ:嗨,咱今天还能讲的完吗?您给来点实际的啊. GG:要听实际的是吧,得嘞,那今天咱就来聊一聊CSS里的伪元素 ...
- css的伪元素 ::after ::before 和 图标字体的使用
浅谈css的伪元素::after和::before css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...
- HTML&CSS基础-伪元素选择器
HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- CSS 的伪元素是什么？
CSS伪元素是用来添加一些选择器的特殊效果.用于:向某个选择器中的文字的首行. ㈠语法 ①伪元素的语法: selector:pseudo-element {property:value;} ②CSS类 ...
随机推荐
- leetcode162
class Solution { public: int findPeakElement(vector<int>& nums) { int n = nums.size(); ) { ...
- 「小程序JAVA实战」小程序的表单组件（25）
转自:https://idig8.com/2018/08/18/xiaochengxujavashizhanxiaochengxudebiaodanzujian25/ 来说下 ,小程序的基础组件.源码 ...
- Redis实战——安装问题汇总
借鉴:https://www.cnblogs.com/liu2-/p/6914159.html 通用方法:迅速查看缺少的包的路径,并安装 yum provides *** 如 yum provides ...
- UNITY 带spriterender的对象导出为prefab时主贴图丢失的BUG
从场景导出带有sprite的对象为prefab时贴图丢失的BUG.解决方案:对场景中每个sprite重新赋一下贴图,然后导出就好了,原因不明. 补充:这个有时候是因为贴图类型不是 2D AND UI ...
- 从一个子视图或者一个View中刷新其他UITableView
被问到了一个问题:如何从一个子视图或者一个View中刷新其他UITableView,常规的写法可能是这样的 TestTVC*testTVC =[[TestTVC alloc] init];[testT ...
- 【原】Coursera—Andrew Ng机器学习—Week 9 习题—异常检测
[1]异常检测 [2]高斯分布 [3]高斯分布 [4] 异常检测 [5]特征选择 [6] [7]多变量高斯分布 Answer: ACD B 错误.需要矩阵Σ可逆,则要求m>n 测验1 Answ ...
- C++中float类型的存储
C++中float用32位来表示,f = (-1)^S * T * 2^E,S是符号位,T是尾数,E是指数 首先我们把f表示成科学计数法的形式,然后再写出其在内存中的表示,在这里T写成1.XXX的形式 ...
- AngularJS与服务器交互（4）
转自:http://itindex.net/detail/50919-angularjs-%E6%9C%8D%E5%8A%A1%E5%99%A8-%E4%BA%A4%E4%BA%92 对于AJAX应用 ...
- MySQL数据库篇之存储引擎
主要内容: 一.数据引擎 二.MySQL支持的存储引擎 三.使用存储引擎 1️⃣ 什么是存储引擎? MySQL中建立的库----> 文件夹,库中建立的表----->文件. 现实生活中我们用 ...
- 关于setTimeout()你所不知道的地方
前言:看了这篇文章,1.注意setTimeout引用的是全部变量还是局部变量了,当直接调用外部函数方法时,实际上函数内部的变量已经变成全 局.2.提醒我防止出错的,用匿名函数不容易出错.3.setTi ...