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实现的透明三角形的更多相关文章

  1. HTML: 用CSS畫一個三角形

    代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  2. 用css做出来一个三角形

    用css做出来一个三角形      <!--不设置宽高  转换行内块  边线设置成宽度-->       <div class="triangle"> 三角 ...

  3. 桌面 透明 三角形 分层窗口 DX

    //桌面 透明 三角形 分层窗口 DX //IDirect3DSurface9 GetDC UpdateLayeredWindow #include <Windows.h> #includ ...

  4. CSS实现背景透明，文字不透明（各浏览器兼容）

    /*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...

  5. CSS实现背景透明，文字不透明（各浏览器兼容） (转)

    /*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center ...

  6. CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

  7. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  8. CSS盒模型之三角形

    W3上介绍盒模型: 这里教程,但是太过于简单了,http://www.w3.org/community/webed/wiki/CSS/Training/Box_model. 如图,盒模型和背景属性控制 ...

  9. css画心形、三角形的总结

    .heart { width: 10px; height: 10px; /* position: fixed; */ background: #fff; transform: rotate(45deg ...

随机推荐

  1. Java时间转换类实现

    Java时间类型非常的差,首先版本问题,本人使用java在Android平台开发.很多Data类的方法已经不提倡使用,一个时间,居然要使用Calendar.DateFormat等类共同编码,非常麻烦. ...

  2. iOS ipv6

    这当中最重要的两个概念是DNS64和NAT64. DNS64 DNS64说白了是用来帮助host获取IPv6地址的,传统的DNS服务器可以把域名转换成IPv4地址,但我们的iPhone设备如果处于IP ...

  3. PetShop 4.0学习笔记：消息队列MSMQ

    直到今天才知道,在我们每天都在用的Window系统里还有这么好用的一个编程组件:消息队列.它能够解决在大数据量交换的情况下的性能问题,特别是BS系统的数据库性能.而且它的异步处理方式能给程序员最大的便 ...

  4. VisJS 随机图

    <!doctype html> <html> <head> <title>Random nodes</title> <style ty ...

  5. kcachegrind gui for callgrind

    DocumentationScreenshotsDownload/SourcesLinksRoadmapBugs & Wishes This is the homepage of the pr ...

  6. mydumper工作原理， seconds_behind_master的陷阱和pt-heartbeat （102)

    http://blog.itpub.net/15480802/cid-84815-list-1/

  7. DES加密系统的实现

    这是一个高内聚低耦合可复用的DES加密系统的实现. Github 链接:https://github.com/cyendra/CyDES 要实现加密系统,先考虑数据的基本单位. 在DES加密中,数据是 ...

  8. (转)我所理解的OOP——UML六种关系

    原文地址:http://www.cnblogs.com/dolphinX/p/3296681.html 最近由于经常给公司的小伙伴儿们讲一些OOP的基本东西,每次草纸都被我弄的很尴尬,画来画去自己都乱 ...

  9. .net System.TypeInitializationException 类型初始值设定项引发异常

    错误原因:静态字段连接数据库内容错误(应为Integrated Security=True) 果然解决! 来自:http://blog.csdn.net/zhang1597116/article/de ...

  10. MVC LINQ中用封装的TSQL通用更新方法

    把TSQL拿出来,做了一个封装,适用的所有表,更新有两种,普通更新和记数更新 看代码:这两个方法是写在DAL里的数据操作基类里的,只有它的子类可以用它,所以用protected做为限制 /// < ...