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 ...
随机推荐
- HDU P4578 Transformation
Problem Description Yuanfang is puzzled with the question below: There are n integers, a1, a2, …, an ...
- CSS-div漂浮
显示效果如下: 代码如下: <div style="width:100%;border-top:0px solid #999999;"> <div style=& ...
- zend studio-字体大小设置
在使用zend studio的过程中为了方便我们编码,很多时候需要设置编码的字体的大小,设置步骤如下: 选择[Windows]-[preference]-[general]-[appearance]- ...
- 正确的使用枚举（Enum）
状态与选项的区别(states and options) 在用enum之前,我个人觉得,区分一下状态和选项的概念还是很必要的. 状态,同时只能有一种,如“OK”,“Error”,不可能同时是OK和Er ...
- start mysqld on Mac server
#!/bin/sh # Source the common setup functions for startup scripts test -r /etc/rc.common || exit 1 . ...
- HINSTANCE数据类型
作者:马 岩(Furzoom) (http://www.cnblogs.com/furzoom/)版权声明:本文的版权归作者与博客园共同所有.转载时请在明显地方注明本文的详细链接,未经作者同意请不要删 ...
- portal单点登录的原理与实现还有ESB
portal单点登录的原理与实现还有ESB 在毕业论文中有描述到这一点.我给我出的截图
- XML序列化/反序列化数据库形式保存和读取。
直接上码: 首先创建class1类 public class Class1 { public string name { get; set; } public int age { get; set; ...
- WPF-TxtBox控件利用KeyDown来控制键盘输入
private void TextBox_PreviewKeyDown(object sender, KeyEventArgs e) { TextBox txt = ...
- WKWebView不显示提示框(Swift)
使用WKWebView的时候会出现明明自己做的一些页面有提示框, 为什么使用别人的页面提示框总是不显示, 其实很大部分原因是因为该提示框是通过JS调用的, 需要实现WKUIDelegate来进行监听 ...