<!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. JS中多个onload冲突解决办法

    一  多个window.onload冲突 在一个页面中有两个JavaScript 分别都用到了window.onload一个是:window.onload=externallinks,另一个是:win ...

  2. 7月19日Docker&Kubernetes技术沙龙总结 - DockOne.io

    7月19日Docker&Kubernetes技术沙龙总结 - DockOne.io undefined

  3. linux下利用openssl来实现证书的颁发（详细步骤）

    1.首先需要安装openssl,一个开源的实现加解密和证书的专业系统.在centos下可以利用yum安装. 2.openssl的配置文件是openssl.cnf,我们一般就是用默认配置就可以.如果证书 ...

  4. 基于iOS，Android的服务器证书失效检测

    1.前言 在目前的iOS,Android手机上,当手机应用进行SSL通信时,手机端默认是不会进行服务器证书是否失效的监测. 在iOS上,系统是会定期获取所访问服务器的证书信息然后出存在本地. 在And ...

  5. Zend Framework 2参考Zend\Authentication(Zend\Authentication介绍)

    原文:Zend Framework 2参考Zend\Authentication(Zend\Authentication介绍) Zend\Authentication组件提供了认证接口和具体的通用的认 ...

  6. varchar（n）和varchar(max)有什么区别

    如果列数据项的大小一致,则使用 char. 如果列数据项的大小差异相当大,则使用 varchar. 如果列数据项大小相差很大,而且大小可能超过 8,000 字节,请使用 varchar(max).

  7. 报错：System.Data.Entity.Infrastructure.DbUpdateException 更新条目时出错

    背景 往数据库添加数据,前端验证通过的情况下,提交报错,程序停在了SaveChanges()这行,并报如上错误. 分析 猜想是提交的领域模型不符合数据库要求,但不知道具体哪里出错.网上查资料,有人发现 ...

  8. Linux内核源代码情景分析系列

    http://blog.sina.com.cn/s/blog_6b94d5680101vfqv.html Linux内核源代码情景分析---第五章 文件系统  5.1 概述 构成一个操作系统最重要的就 ...

  9. group by是什么意思 mysql中

    mysql语法中group by是什么意思? 在百度中搜索半天,最后找到一篇解释比较好的(不是博文,是百度知道,很郁闷那么多网友怎么就没人解释的清楚),链接如下: http://zhidao.baid ...

  10. iOS开发大神必备的Xcode插件

    写在前面 工欲善其事,必先利其器,iOS开发中不仅要学会Xcode的基本操作,而且还得学会一些Xcode的使用技巧,如掌握常用的快捷键等,还有就是今天要说到的Xcode插件,下面我就为大家介绍几款开发 ...