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 ...
随机推荐
- 查看当前正在被执行的sql
由于在公司服务器上在某个时段查询某个sql执行比较慢,由来查询当前正在被执行的sql Select t.text,SUBSTRING(t.text, (r.statement_start_offset ...
- CopyU！SW新版发布！
CopyU!SW新版发布,版本号为:2.1.412.213 主要更新内容如下: 此版本(2.1.412.213)主要作了如下更新: 1.修复了CopyU!SW版本中的运行模式规则的设定错 ...
- editplus如何设置不自动备份
依次选择:工具,参数设置,文件(默认展开的,要缩回),然后看右边“保存文件时创建备份”,前面的框不要打勾,应用,确定
- [ATL/WTL]_[0基础]_[CBitmap复制图片-截取图片-平铺图片]
场景: 1.当你须要截取图片部分区域作为某个控件的背景. 2.须要平铺图片到一个大区域让他自己主动放大时. 3.或者须要合并图片时. 代码: CDC sdc; CDC ddc; sdc.CreateC ...
- Html的空格显示
一.使用全角空格 全角空格被解释为汉字,所以不会被被解释为HTML分隔符,能够依照实际的空格数显示. 二.使用空格的替代符号 替代符号就是在须要显示空格的地方添�替代符号,这些符号会被浏览器解释为空格 ...
- <ASP.NET4 从入门到精通>学习笔记3
第三部分,状态管理与缓存 何为状态管理.起始对于web而言.经过前面章节的解说.已经理解,对于web程序,就是一个无状态的程序.每次的请求与每次的响应,两者之间本身就是独立存在的,这一点对于早期的静态 ...
- shared_ptr与weak_ptr的例子
12.20 编写程序,逐行读入一个输入文件,将内容存入一个StrBlob中,用一个StrBlobPtr打印出StrBlob的每个元素. StrBlob.h #ifndef STRBLOB_H #def ...
- 真相：中国版BBB用USB连电脑没有盘符的根本原因分析
很多网友在问:为什么中国版的装完驱动插上板子没有显示端口号和69M的盘符??楼主发现,在开机启动的时候,加载g_multi模块时出现错误提示 invalid argument. Emb ...
- 删除主目录下的.ssh目录下文件对boot2docker启动影响
现象: 1) boot2docker ssh需要输入密码 2) boot2docker start 或 up 需要输入密码 解决方法: 1)删除 /Users/sunzhaoyu/.boot2dock ...
- mysql内存使用情况
可以直接使用top命令后,查看%MEM的内容.可以选择按进程查看或者按用户查看,如想查看oracle用户的进程内存使用情况的话可以使用如下的命令: (1)top top命令是Linux下常用的性能分析 ...