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. SQL Server tables export/import with bcp

    Export tables below bcp wind.wind.WTUser OUT c:\WTUser.bcp -T -N bcp wind.wind.EPPlan OUT c:\EPPlan. ...

  2. 关于angular的ng-class条件判断

    angular的ng-class的多条件判断是非常好用的,不需要写过多的判断去更改他相应的class, 但大家要记住,在repeat中使用ng-class多条件判断时, 错误写法:<i clas ...

  3. jpcap 配置方法，问题解决，模拟sniffer程序。（附JAVA程序，jar，dll包等环境）

    博文链接 http://www.cnblogs.com/xckk/p/4609444.html 一.   Eclipse环境下安装与配置Jpcap 相关源程序.jpcap jar包,dll包,帮助文档 ...

  4. Windows下FFmpeg高速入门

    本系列文章导航 Windows下FFmpeg高速入门 ffmpeg參数解释 mencoder和ffmpeg參数具体解释(Java处理视频) Java 生成视频缩略图(ffmpeg) 使用ffmpeg进 ...

  5. mysql 服务器ip连接统计

    有的时候数据库服务器连接数过大,也没有慢sql,想知道哪些应用服务器连接上来的比较多,下面的命令轻松搞定 netstat -tnp|grep ESTABLISHED|awk '{ print $5 } ...

  6. 启动列表的activity

    每学一个知识点就要重新创建一个项目,感觉那样太繁琐了,特别是android studio开发,没创建一个项目都会重新打开一个窗口 所以我就在那想,何不有一个功能列表,点击每一个列表项的时候就跳转到那个 ...

  7. [Webpack 2] Ensure all source files are included in test coverage reports with Webpack

    If you’re only instrumenting the files in your project that are under test then your code coverage r ...

  8. [React] React Fundamentals: transferPropsTo

    the transferPropsTo method lets you easily push properties into your components to easily customize ...

  9. Android源码是这样搞到的(图解)

    Android学习到一定程度,就一定要多读代码多思考,Android源码就是很好的学习材料,本文就是把Android的源码下载下来.我们知道Android的源码是用Git这个分布式版本号控制工具管理的 ...

  10. RHCA442学习笔记-Unit11内存缓存

      Unit 11 Memory Caches 内存缓存           学习目标:                 A. 使用内存来改善运行慢的子系统的服务时间.   11.1 Strategi ...