简述

在前面，我们分享过关于三角的实现方式，主要根据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/Jquery]天气接口简单使用

    写在前面 今天在群里有朋友使用一个天气api,觉得挺实用的,就记录一下.省的以后再花费功夫去找. 地址:http://www.k780.com/api,在这个网站提供了实用的几种接口,比如查询ip,天 ...

  2. rm删除命令

    linux中删除文件和目录的命令: rm命令.rm是常用的命令,该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目录及其下的所有文件及子目录均删除.对于链接文件,只是删除了链接,原有 ...

  3. 使用Rails 4.2+ 测试异步邮件系统

    [导读]异步测试总是一个很大的问题,邮件发送测试更是让很多开发同学不知道从哪里入手.在新版的Rails里,这类测试在很大程度上被简化了. 以下为译文 在编写需要发送邮件的应用时,控制器是绝不能被阻塞的 ...

  4. FastDfs点滴

    1.centos安装后提示找不到libevent动态库 根据系统是64位版本还是32位版本,若是64位版本则默认回到 /usr/lib64 目录下查找,而对于32位则到 /usr/lib 目录下查找. ...

  5. CodeForces 1B Spreadsheets (字符串处理，注意细节，大胆尝试)

    题目 注意模后余数为0时,要把除以26后的新数据减1,为什么这样,要靠大胆尝试.我在对小比赛中坑了一下午啊,直到比赛结束也没写出这道题....要死了.. #include<stdio.h> ...

  6. POJ 3243 Clever Y （求解高次同余方程A^x=B(mod C) Baby Step Giant Step算法）

    不理解Baby Step Giant Step算法,请戳: http://www.cnblogs.com/chenxiwenruo/p/3554885.html #include <iostre ...

  7. [RM HA 2] Hadoop 2.0 ResourceManager HA原理

    继上篇文章验证Cloudera RM HA功能后,现在开始分析Cloudera RM HA的原理. 设计目标 主要目的是为了解决两种问题 计划外的机器挂掉 计划内的如软件和硬件升级等. 架构 流程:两 ...

  8. java开发--JavaScript

    http://www.cnblogs.com/hongten/archive/2011/03/21/1990121.html JavaScript表单验证电话号码,判断一个输入量是否为电话号码,通过正 ...

  9. Centos环境下部署游戏服务器－简介

    一.前言      在接触这个操作系统之前我一直使用的是ubuntu和mac os,这次由于游戏是测试版本,没有专业的运维人员去做这件事情,只能我这个稍微懂一点linux的人来做这件事情了.由于涉及到 ...

  10. Mysql笔记——DML

    数据操纵语言DML(Data Manipulation Language),用户通过它可以实现对数据库的基本操作. ========================== 1 插入数据 语法:INSER ...