<!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. 用户home目录下的.gitconfig 和 库文件夹目录下的 .gitignore 示例

    .gitconfig文件: [user] name = hzh email = @qq.com [core] editor = vi quotepath = false [merge] tool = ...

  2. 为什么用 Java：一个 Python 程序员告诉你

    这篇文章专门给程序员写的,普通读者慎入.原作者:Kevin Sookocheff 译者:Celia Zhen,原文点击文末链接. 每当我告诉别人我一直在用Java工作时,大家的反应都是: “纳尼!Ja ...

  3. mongoDB启动参数备忘

    本文转载 Mongodb启动命令mongod参数说明   mongod的主要参数有:    基本配置   ----------------------------------------------- ...

  4. web前后台数据交互的四种方式(转)

    1.利用cookie对象  Cookie是服务器保存在客户端中的一小段数据信息.使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置.一般不赞成使用Cookie. (1 ...

  5. c#复制图片到粘贴板

    string fielN; private void button1_Click(object sender, EventArgs e) { OpenFileDialog saveFileDialog ...

  6. clas

  7. jvm参数设置大全

    转自:http://blog.csdn.net/kthq/article/details/8618052 参数说明 -Xmx3550m:设置JVM最大堆内存为3550M. -Xms3550m:设置JV ...

  8. IOS开发之——使用Segue在StoryBoard之间切换

    使用Segue能够在ViewController之间来回切换,以下就来说下切换方法: 1. 使用点击button进行切换 直接上图,在须要切换的View属性界面,点击Modal然后拉到前一个view界 ...

  9. Kia&#39;s Calculation（贪心）

    pid=4726">http://acm.hdu.edu.cn/showproblem.php? pid=4726 大致题意:给两个长度小于10^6且相等的合法的正整数.你能够随意组合 ...

  10. linux 0.11 源码学习+ IO模型

    http://www.cnblogs.com/Fredric-2013/category/696688.html