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. Android音频底层调试-基于tinyalsa

    因为Android中默认并没有使用标准alsa,而是使用的是tinyalsa.所以就算基于命令行的測试也要使用libtinyalsa.Android系统在上层Audio千变万化的时候,能够能这些个工具 ...

  2. JSON未定义解决办法

    json官网:www.json.org json2.js地址:https://github.com/douglascrockford/JSON-js/blob/master/json2.js 引入解决 ...

  3. ubuntu12.04已安装SQLite3 而简单易用

    今天想写一点app,使用数据库,所以在这里简要地记住它是安装和使用. 1.安装SQLite3 命令行下输入:sudo apt-get install sqlite3 2.安装SQLite3编译须要的工 ...

  4. linux调度器 信息解读

    http://blog.csdn.net/wudongxu/article/category/791519

  5. DiscreteSeekBar使用简介，一个带气泡的SeekBar

    android自带的SeekBar样式比较古板,如果我们想让自己的SeekBar炫起来,那么可以考虑使用DiscreteSeekBar.DiscreteSeekBar是GitHub上的一个开源控件,地 ...

  6. Java基础知识强化之IO流笔记39：字符流缓冲流之复制文本文件案例01

    1. 字符流缓冲流之复制文本文件案例 需求:把当前项目目录下的a.txt内容复制到当前项目目录下的b.txt中 数据源: a.txt -- 读取数据 -- 字符转换流 -- InputStreamRe ...

  7. 基于anyrtc的sdk实现直播连麦互动

    基于anyrtc的sdk实现直播连麦互动 前言 1.由于粘贴了较大的代码,造成内容比较长,可能会花费您较长的时间. 2.项目里面没有做权限判断,所以如果发现有页面发生崩溃可能是权限没有打开,请打开权限 ...

  8. 使用nexus创建maven私有仓库

    nexus安装 nexus下载 wget https://sonatype-download.global.ssl.fastly.net/nexus/oss/nexus-2.11.1-01-bundl ...

  9. Tcl在Vivado中的使用

    http://blog.chinaaet.com/detail/36014 Vivado是Xilinx最新的FPGA设计工具,支持7系列以后的FPGA及Zynq 7000的开发.与之前的ISE设计套件 ...

  10. JAVA练习

    JAVA基础练习 1.给java,stb,sql三门科目的成绩算出JAVA和SQL的成绩差,JAVA和SQL的成绩共是,三门课的总分是,三门课的平均分是多少 import java.util.Scan ...