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 ...
随机推荐
- python学习之元组
#coding:utf-8# __author__ = 'Administrator'#元组:不可变序列 #空元组mm=()print mm#只有一个值的元组mm=(1,)print mmx=1,2, ...
- [置顶] 单机版hadoop实例安装
目标:运行单机版hadoop http://localhost:50030mapredule监控界面 http://localhost:50070HDFS监控页面 -->安装linux系统 -- ...
- SQL注入专题
SQL注入专题--整理帖 SQL注入是从正常的WWW端口访问,而且表面看起来跟一般的Web页面访问没什么区别, 所以目前市面的防火墙都不会对SQL注入发出警报,如果管理员没查看IIS日志的习惯,可能被 ...
- Dreamweaver中清除php代码中多余空行的方法
使用DW自带的搜索功能,利用正则表达式 使用正则表达式搜索:\r\n\s*\r\n即可搜到代码中的空行,再用回车符\n替换即可消除代码中的多余空行
- android中利用实现二级联动的效果
按照惯例,首先上一张效果图. 本篇文章实现的效果就是如图中所圈的那样,实现类似于HTML中的二级联动的效果. 对于第一个选项我们读取的是本地xml文件来填充数据的, 对于第二个选项我们读取的是通过中央 ...
- mysql.cnf 配制文件详解
代码如下: [client]port = 3306socket = /tmp/mysql.sock [mysqld]port = 3306socket = /tmp/mysql.sock basedi ...
- java中最简单的方式新起一个线程
启动一个线程在一个方法中启动一个线程,有两种方法第一种是让类实现Runable接口,这样的话编译器就会提示你实现里面的未实现的方法(就是run方法)第二种是,现在方法中new一个线程,然后直接调用他的 ...
- ccmenu里的位置
ccmenu里的位置 ccctableviewcell内的元素不需要设置高度 调整buyitem内的元素的位置,可以通过一个item来调整. ccctableview.ccctableviewcell ...
- Cannot load JDBC driver class 'oracle.jdbc.driver.OracleDriver'
出现这个问题,说明oracle的驱动包没有成功加载. 1.检查maven pom.xml有没有引入驱动: <dependency> <group ...
- 第九篇：web之前端之web上传文件的方式
前端之web上传文件的方式 前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构 ...