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 ...
随机推荐
- iOS开发中使用静态库 .a 文件
iOS开发中,在使用一些第三方库时,可能是一个静态库(比如GPUImage).这种情况下,需要编译出静态库文件(.a) ,然后配合响应的头文件(.h 文件)使用. 编译静态库,直接在Xcode中编 ...
- PowerDesigner实用技巧小结(2)
PowerDesigner实用技巧小结 1.ORACLE数据库建模时,由于ORACLE的表名.字段名如果是小写会有一定的麻烦,需要将小写转化为大写? (1)在打开pdm的情况下,进入Tools-Mod ...
- SQL 获取 IDENTITY 三种方法 SCOPE_IDENTITY、IDENT_CURRENT 和 @@IDENTITY的区别
-------总结:用SCOPE_IDENTITY()函数靠谱 @@IDENTITY (Transact-SQL) 返回最后插入的标识值的系统函数. 备注 在一条 INSERT.SELECT INTO ...
- 一秒钟速算(WINFORM)
WIN7以上的系统可以直接运行,XP的系统要按装.NET 2.0 程序下载 http://files.cnblogs.com/xe2011/%E4%B8%80%E7%A7%92%E9%92%9F%E5 ...
- 多平台响应键盘事件！（适用于Cocos2dx 3.0 alpha以上版本号）
Hello everyone! For a week I've been looking on how to make a keyboard work! I managed to figure it ...
- YII2安装中遇到的错误解决Calling unknown method: yii\web\UrlManager::addRules()
安装好YII2 后出现 例如以下图错误提示: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenF0c3g=/font/5a6L5L2T/fontsize/ ...
- 常用加密算法的Java实现总结(二) ——对称加密算法DES、3DES和AES
1.对称加密算法 1.1 定义 对称加密算法是应用较早的加密算法,技术成熟.在对称加密算法中,数据发信方将明文(原始数据)和加密密钥(mi yue)一起经过特殊加密算法处理后,使其变成复杂的加密密文发 ...
- TCP/IP 中的二进制反码求和算法
对于这个算法,很多书上只是说一下思路,没有具体的实现.我在这里举个例子吧 以4bit(计算方便一点,和16bit是一样的)做检验和来验证. 建设原始数据为 1100 , 1010 , 0000(校验位 ...
- Android（java）学习笔记139：在TextView组件中利用Html插入文字或图片
首先我们看看代码: 1.activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/r ...
- 获取随机颜色js
获取随机颜色方法一: function randomColor1() { var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16); i ...