css实现的透明三角形
css实现下图样式，具体像素值记不住了，很好设置，html code (2014百度秋招面试题)：
<div id="demo"></div>
分析：这个样式的关键就在三角形和三角形实现了之后的变成只有个边框的三角形。利用元素的：after和：before伪元素(请自动忽略低版本IE)。
思想：先实现个正方形，在实现个三角形层，放在右上角，然后再实现一个透明的三角形覆盖黑色三角形的内部，只留边框。
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset=utf-8>
5 <title>demo</title>
6 </head>
7
8 <style>
9 #demo{
10 width:100px;
11 height:100px;
12 border:2px solid #000;
13 }
14 #demo:before{
15 content:'';
16 display:block;
17 width:0;
18 height:0;
19 position:relative;
20 top:10px;
21 left:100px;
22 border-left:9px solid #000;
23 border-top:7px solid transparent;
24 border-bottom:7px solid transparent;
25 }
26 #demo:after{
27 content:'';
28 display:block;
29 width:0;
30 height:0;
31 position:relative;
32 top:-2px;
33 left:100px;
34 border-left:7px solid #fff;
35 border-top:5px solid transparent;
36 border-bottom:5px solid transparent;
37 }
38
39 </style>
40 <body>
41 <div id='demo'></div>
42 <script>
43
44 </script>
45 </body>
46 </html>
css实现的透明三角形的更多相关文章
- HTML: 用CSS畫一個三角形
代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- 用css做出来一个三角形
用css做出来一个三角形 <!--不设置宽高 转换行内块 边线设置成宽度--> <div class="triangle"> 三角 ...
- 桌面 透明 三角形 分层窗口 DX
//桌面 透明 三角形 分层窗口 DX //IDirect3DSurface9 GetDC UpdateLayeredWindow #include <Windows.h> #includ ...
- CSS实现背景透明，文字不透明（各浏览器兼容）
/*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...
- CSS实现背景透明，文字不透明（各浏览器兼容） (转)
/*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center ...
- CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容
CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...
- css中border画三角形
<!doctype html><html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS盒模型之三角形
W3上介绍盒模型: 这里教程,但是太过于简单了,http://www.w3.org/community/webed/wiki/CSS/Training/Box_model. 如图,盒模型和背景属性控制 ...
- css画心形、三角形的总结
.heart { width: 10px; height: 10px; /* position: fixed; */ background: #fff; transform: rotate(45deg ...
随机推荐
- NSAutoreleasePool' is unavailable: not avail
NSAutoreleasePool' is unavailable: not available in automatic reference counting mode 这我就纠结了,对着书敲都出问 ...
- .net如何自定义config配置文件节点
本文转载:http://www.cnblogs.com/lori/archive/2013/04/03/2997617.html 对于小型项目来说,配置信息可以通过appSettings进行配置,而如 ...
- sudo apt-get install gksu
exmyth@Inspiron-5437:/etc/default$ gksu gedit apport 程序“gksu”尚未安装. 您可以使用以下命令安装:sudo apt-get install ...
- Cocos2d-x 3.0- 在Visual Studio 2012中执行測试项目
Cocos2d-x - 怎样在Win32执行cpp-tests 2014年4月30日 星期三 小雨 微凉 稍显疲惫 注:本篇文章来自Cocos2d-x官网,小巫仅仅是粗略翻译眼下最新版本号的,教大家怎 ...
- matlab两种不同模式的并行运算
1.distributed job distributed job是一种比較简单的并行任务.假定用户须要完毕一组作业.各个计算作业之间是独立的.并且相互之间不须要进行数据通信.这意味着各个作 ...
- celery expires 让celery任务具有时效性
起因:有的时候.我们希望任务具有时效性.比方定时每5分钟去抓取某个状态,由于celery队列中的任务可能非常多,等到这个任务被运行时.已经超过了5分钟,那么这个任务的运行已经没有意义.由于下一次抓取已 ...
- linux内存管理解析1----linux物理，线性内存布局及页表的初始化
主要议题: 1分页,分段模式及实模式 2Linux分页 3linux内存线性地址空间布局及物理内存空间布局 4linux页表初始化及代码解析 1.1.1内存寻址和保护模式 在X86平台上,内存控制单元 ...
- C#异常之（已有打开的与此 Command 相关联，已有打开的与此命令相关联的 DataReader，必须首先将它关闭。）
异常提示:“System.InvalidOperationException”类型的异常在 System.Data.dll 中发生,但未在用户代码中进行处理 其他信息: 已有打开的与此 Comman ...
- webstorm 如何修改背景颜色
http://www.cnblogs.com/zxyun/p/4744744.html 见文章底部有图文说明 15个必须知道的chrome开发者技巧(GIF):http://www.wtoutiao. ...
- OLEDB读取EXCEL表格时，某些字段为空，怎么办？
转载:http://blog.sina.com.cn/s/blog_53864cba01011cbn.html 前些日子,写了一个Excel导入数据库的共同Batch,突然有一天发现当我修改Exc ...