<!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. Struct2 拦截器

    拦截器的整个过程 程序是在执行Action之前调用的拦截器,整个过程是这样子的 这里面注意两个问题: public void serviceAction(HttpServletRequest requ ...

  2. Echarts双轴图的配置.

    在series中的数据组加个属性,yAxisIndex: 1,表示第二个数据用的是第二个y轴,不加这个属性的话都是默认0,即第一个属性,再配置yAxis的值第一个为左侧坐标轴,右册坐标轴为第二个配置参 ...

  3. ABAP SAPGUI_PROGRESS_INDICATOR 显示数据处理进度

    ABAP处理的数据量较大时,盯着一动不动的选择屏幕是不是很无聊?? LOOP AT I_TAB. DESCRIBE TABLE I_TAB[] LINES L_LIN. L_PERC = SY-TAB ...

  4. request对象方法详解

    自己整理的 javax.servlet.http.HttpServletrequest 所有方法,欢迎收藏! 方法名 说明 isUserInRole 判断认证后的用户是否属于某一成员组 getAttr ...

  5. ACM 关于数据输入加速

    转载请注明出处:http://blog.csdn.net/a1dark 分析:我们都知道运行时间对我们来说很重要.有时候不惜用大量的内存去换取一点时间.有些人可能都比较关注这个问题.首先时间上:cin ...

  6. Qemu下安装Sun Solairs8简明教程 转

    http://blog.csdn.net/stonesharp/article/details/8928393 Qemu下安装Sun Solairs8简明教程(Centos6. / Win7) 作者: ...

  7. Chapter 5 - How to Detect the Collisions

    Chapter 5 - How to Detect the Collisions Our hero can fire bullets now, but the bullets are only vis ...

  8. Android开发之屏幕方向

    一.处理屏幕方向变化的两种技术 1.锚定方法 2.调整大小和重新定位,这种方法一般是分别为横向和纵向两种模式各自定义用户界面xml界面文件,当方向变化时读取对应的界面配置文件即可. 二.检测屏幕方向改 ...

  9. sql like '%x%'优化

    好久没写点什么了.唉(此处省略无数,一切尽在苦逼中...) 说说sql中的全匹配优化吧.在sql server进行模糊查询的时候,如果是进行全匹配的话,那么肯定会用到like.我们知道like '%张 ...

  10. POJ-3278(BFS)

    题目:                                                                                                 ...