<!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. 从源码编译rpi的内核

    Kernel Building https://www.raspberrypi.org/documentation/linux/kernel/building.md There are two mai ...

  2. gcc 的visibility 使用

    gcc 的visibility 使用(zz) -fvisibility=default|internal|hidden|protectedgcc的visibility是说,如果编译的时候用了这个属性, ...

  3. Android开发艺术探索（一）——Activity的生命周期和启动模式

    Activity的生命周期和启动模式 生命周期有? 1.典型情况下的生命周期—>指有用户参与的情况下,Activity所经过的生命周期改变 2.异常情况下的生命周期—>指Activity被 ...

  4. OPENCV中滑动条的使用

    //文中存在两种不同的图像的平滑类型.一类是彩色图像,还有一类是灰度图像.经证明,两种均能够 #include<cv.h> #include<highgui.h> #inclu ...

  5. android 69 SQLite数据库

    package com.itheima.sqlitedatabase; import java.sql.ResultSet; import android.content.Context; impor ...

  6. 本地nginx多域名映射

    前言: 工作两年多了,一直感觉技术上没有太大的长进,好多东西感觉会但是给别人讲起来的时候又感觉和没学过一样.以后希望能坚持写博客,把看过的东西都一点一滴积累下来.言归正传,今天要说的是nginx与ho ...

  7. JVM Davilk ART 简介 区别

    JVM和DVM JavaSE 程序使用的虚拟机叫 Java Virtual Machine,简称 JVM.Android 平台虽然是使用java语言来开发应用程序,但Android程序却不是运行在标准 ...

  8. Python实战：美女图片下载器，海量图片任你下载

    Python应用现在如火如荼,应用范围很广.因其效率高开发迅速的优势,快速进入编程语言排行榜前几名.本系列文章致力于可以全面系统的介绍Python语言开发知识和相关知识总结.希望大家能够快速入门并学习 ...

  9. C#教程之打印和打印预览

    最近研究一了一下关于PDF打印和打印预览的功能,在此小小的总结记录一下学习过程. 实现打印和打印预览的方法,一般要实现如下的菜单项:打印.打印预览.页面设置. PrintDocument类 Print ...

  10. javascript 之原型理解

    最近一直在了解javascript原型的问题,也算是理解了一点,希望把我所理解的,用简单的例子和说明,让更多人清除的去理解javascript原型 1,原型 prototype 是一个什么东西 我们创 ...