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. git 秘钥的生成

    在命令查看自己的秘钥还是公钥 cat .ssh/id_rsa.pub/cat .ssh/id_rsa

  2. PagerSlidingTabStrip

    https://github.com/jpardogo/PagerSlidingTabStrip     

  3. C#数据库读取数据后转换为INT32后计算的小技巧

    这有什么难的,不管是什么数据库, 首先分别读出userinfo中usermoney的值 存入s1,card中extramoney的值s2 读出字段数据你应该会吧! 再用userinfo中字段userm ...

  4. EventBus3.0使用总结

    在Android中,接口回调已经能够处理掉大部分业务需求了,实在太变态的需求就用广播也能够完成,自己写的性能好出问题也好解决.....工作需要,不得不看看EventBus的用法,今天就来介绍一下学习经 ...

  5. Android（java）学习笔记163：Android开发时候颜色设置是bgr不是rgb

    eb" android:background ="#" 

  6. pthread

    pthread是UNIX操作系统中创建和控制线程的一系列API,通过了解这些API,可以更加清晰的理解线程究竟是什么. 调用pthread的API首先要包含<pthread.h>这一头文件 ...

  7. Hibernate事务管理

    User类: public class User implements Serializable{ public User(){} private Integer id; private String ...

  8. (转)JSON基础入门

    原文地址:http://kb.cnblogs.com/page/43982/ JSON 基础简单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松 ...

  9. 将商品SKU数据按商品分组，组装成json数据

    需要封装的数据   将这些数据,分组出来,OLGoodsID相同的为一组,然后每个组的OLSKUID,放在一个字段里,变成 [{"OLGoodID":"test06261 ...

  10. Android应用Icon大小在不同分辨率下定义

    http://www.ard9.com/gsjj/204.html 对于Android平台来说,不同分辨率下Icon的大小设计有着不同的要求,对于目前主流的 HDPI即WVGA级别来说,通常hdpi的 ...