<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #sj{

                width: 0;

                border-top: 20px solid #fde;

                border-bottom: 20px solid #ffb;

                border-left: 20px solid #fba;

                border-right: 20px solid #bac;

            }

            .box{

                width: 200px;

                height: 200px;

                border-top: 5px solid #def;

                border-left: 5px solid #bac;

            }

        </style>

    </head>

    <body>

        <div id="sj">

        </div>

        <div class="box"></div>

    </body>

</html>

在三角形的透明上可以采用三种解决方案，

1.将背景颜色设置成和所对应的背景颜色相同

2.强css中的背景颜色采用rgba（）来设置

3.利用transparent属性值

demo_04绘制三角形的更多相关文章

  1. 纯CCS绘制三角形箭头图案

    用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码: /* create an arrow that points up */ div.ar ...

  2. unity 绘制三角形

    哎 该学的还是要学 参考:http://www.narkii.com/club/thread-369573-1.html unity 顶点绘制三角形 脚本绘制; 其实filter和render就是进行 ...

  3. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  4. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  5. 【转载】理解GL_TRIANGLE_STRIP等绘制三角形序列的三种方式

    GL_TRIANGLE_STRIP绘制三角形方式很多时候令人疑惑,在这里对其运作机理进行解释. 一般情况下有三种绘制一系列三角形的方式,分别是GL_TRIANGLES.GL_TRIANGLE_STRI ...

  6. CSS - Tooltip-arrow 绘制三角形

    问题:纯CSS实现bubble的三角形部分 方法:使用border来绘制三角形:例如 .trangle { ; border-color: transparent; border-style: sol ...

  7. CSS用border绘制三角形

    使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子 ...

  8. Android OpenGL ES（十）绘制三角形Triangle .

    三角形为OpenGL ES支持的面,同样创建一个DrawTriangle Activity,定义6个顶点使用三种不同模式来绘制三角形: float vertexArray[] = { -0.8f, - ...

  9. Android OpenGL 入门示例----绘制三角形和正方形

    Android上对OpenGl的支持是无缝的,所以才有众多3D效果如此逼真的游戏,在Camera的一些流程中也有用到GLSurfaceView的情况.本文记录OpenGL在Android上的入门级示例 ...

随机推荐

  1. 【转】终极 Shell

    Post navigation ← PreviousNext → 终极 Shell Posted on 2013 年 7 月 23 日 在开始今天的 MacTalk 之前,先问两个问题吧: 1.相对于 ...

  2. spf13配置问题

    git clone https://github.com/spf13/spf13-vim.git tab是黑的色 加入这样一行就可以了set nolist if下的黑边在~/.vimrc里面吧inde ...

  3. php如何修改SESSION的生存时间

    如何修改SESSION的生存时间 我们来手动设置 Session 的生存期: <?phpsession_start(); // 保存一天 $lifeTime = 24 * 3600; setco ...

  4. 写一段方便的SQL 循环查每一天的数据

    declare @recd int,@i int,@a int,@count int,@day1 date,@day2 date,@days int set @day1='2014-8-24' set ...

  5. FastDFS分布文件系统[转]

    FastDFS是为互联网应用量身定做的一套分布式文件存储系统,非常适合用来存储用户图片.视频.文档等文件.对于互联网应用,和其他分布式文件系统相比,优势非常明显.具体情况大家可以看相关的介绍文档,包括 ...

  6. VC++ 获取windows系统的版本类型

    vc中获取windows版本信息,一般是调用GetVersionEx 这个API函数来获取的,这个API需要OSVERSIONINFOEX 这个结构体作为参数,OSVERSIONINFOEX 的对应的 ...

  7. Android 高级UI设计笔记01：使用ExpandableListView组件（ListView的扩展）

    1.ExpandableListView是一个用来显示二级节点的ListView. 比如如下效果的界面: 2.使用ExpandableListView步骤 (1)要给ExpandableListVie ...

  8. wget下载网站整个目录

    wget -r -p -np -k -P ./data/ http://example.com/eg/ 具体参数: -P 表示下载到哪个目录 -r 表示递归下载 -np 表示不下载旁站连接 -k 表示 ...

  9. Prototype 原型模式

    用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 原型模式即在运行时动态的通过一个对象的实例来创建这个类的对象,可以理解成通过一个实例克隆出另一个实例. Prototype模式的一些优 ...

  10. json 是什么

    怎么学习一个知识? 首先要提出几个问题,目前认为json是个什么,json是谁创造的,为什么而出现的,但是目前仅有很长时间之前别人直接告诉我的,json用来存数据的,对于使用也忘记的差不多了,所以现在 ...