简述

在前面，我们分享过关于三角的实现方式，主要根据border属性来设置，下面我们来实现上、下、左、右各种不同颜色的三角。

实现

效果

源码

<!DOCTYPE html>

<html>

<head>

<style type='text/css'>

/* 上三角 */

.arrow-up {

  width: 0;

  height: 0;

  border-left: 20px solid transparent;

  border-right: 20px solid transparent;

  border-bottom: 20px solid green;

}

/* 下三角 */

.arrow-down {

  width: 0;

  height: 0;

  border-left: 20px solid transparent;

  border-right: 20px solid transparent;

  border-top: 20px solid orange;

}

/* 右三角 */

.arrow-right {

  width: 0;

  height: 0;

  border-top: 60px solid transparent;

  border-bottom: 60px solid transparent;

  border-left: 60px solid blue;

}

/* 左三角 */

.arrow-left {

  width: 0;

  height: 0;

  border-top: 10px solid transparent;

  border-bottom: 10px solid transparent;

  border-right: 10px solid silver;

}

</style>

</head>

<body>

  <div class="arrow-up"></div>

  <div class="arrow-down"></div>

  <div class="arrow-left"></div>

  <div class="arrow-right"></div>

</body>

</html>

代码比较简单，我就不过多阐述了！

CSS3之创建透明边框三角的更多相关文章

  1. 利用CSS3实现透明边框和多重边框

    使用background-clip属性实现透明边框 .bordertest { border: 30px solid hsla(0,0%,90%,.5); background: #bbb; back ...

  2. CSS3实现原腾讯视频透明边框，多重边框等（关于边框那些不为人知的事情）

    1.hsla或rgba实现半透明边框. rgba在rgb的基础上增加了透明通道,就不详细说了,下面重点说下hsla: 说明: HSLA(H,S,L,A) 取值: H:Hue(色调).0(或360)表示 ...

  3. （转）利用 SVG 和 CSS3 实现有趣的边框动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  4. css3实践—创建3D立方体

    css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的 ...

  5. border --- 透明边框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. WPF 创建无边框的圆角窗口

    原文:WPF 创建无边框的圆角窗口 如题所述,在WPF中要创建一个没有边框且为圆角的窗体,有如下几步工作要进行: 第一步:去掉窗体默认样式的边框 首先将窗体的背景设为透明,将允许透明的属性设置为Tru ...

  7. Unity3D ShaderLab 使用alpha参数创建透明效果

    Unity3D ShaderLab 使用alpha参数创建透明效果 其实Unity为了方便我们的工作,为我们内置了很多参数.比如马上用到的透明功能. 准备场景新建Shader Material ,一张 ...

  8. CSS3实现半像素边框

    一.思路 普通的1px黑色实线边框: border: 1px solid #000; 半像素边框当然不是简单地把1px改为0.5px(没测试过,可能会被解析成1或者0),border-width的值只 ...

  9. 【Unity Shaders】Transparency —— 使用alpha通道创建透明效果

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

随机推荐

  1. JS中的间歇(周期)调用setInterval()与超时(延迟)调用setTimeout()相关总结

    超时调用需要使用window.setTimeout(code,millisec)方法 它接受两个参数:要执行的代码和以毫秒表示的时间(即在执行代码前需要等待多少毫秒).其中第一个参数可以是一个包含JS ...

  2. CentOS 6下安装nginx

    原文:http://yubosun.akhtm.com/tech/centos-nginx.htm 1 在nginx官方网站下载一个rpm包,下载地址是:http://nginx.org/en/dow ...

  3. vi/vim使用指北 ---- Introducting the ex Editor

    本章介绍ex编辑器,为什么要介绍这样一个新的编辑器呢:其实ex编辑器不能算是一个新的编辑器,vi只是它的visual model,它已经是一个更普遍,基于行的编辑器.ex提供更大机动和范围的编辑命令. ...

  4. https://google-developers.appspot.com/chart/

    https://google-developers.appspot.com/chart/

  5. Java 并发同步器之CountDownLatch、CyclicBarrier

    一.简介 1.CountDownLatch是一个同步计数器,构造时传入int参数,该参数就是计数器的初始值,每调用一次countDown()方法,计数器减1,计数器大于0 时,await()方法会阻塞 ...

  6. 在linux服务器上装svn版本管理，自动部署代码到项目

    在linux服务器上装svn版本管理,自动部署代码到项目 http://bbs.aliyun.com/read/9715.html?spm=5176.7114037.1996646101.1.W3zw ...

  7. python 安装 管理包 pip

    2.7的坑里出不来了,现在已经换到3.4了,不存在下列问题. win7下安装pip    http://blog.chinaunix.net/uid-24984661-id-4202194.html ...

  8. GCD初步认识

    //(1)用异步函数往并发队列中添加任务, //总结:同时开启三个子线程 - (void)test1 { //1.获得全局的并发队列 dispatch_queue_t queue = dispatch ...

  9. 初学Ajax(二)

    $.get()和$.post() .load()方法是局部方法,因为它需要一个包含元素的jQuery对象作为前缀.而$.get()和$.post()是全局方法,无须指定某个元素.对于用途而言,.loa ...

  10. Java集合框架(四)

    Collections    集合框架的工具类    着重讲解以下方法: 1.sort(): 1º根据元素的自然顺序对指定列表按升序进行排序,列表中的所有元素都必须实现comparable接口. pu ...