简述

在前面，我们分享过关于三角的实现方式，主要根据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. HDOJ 1466 计算直线的交点数

    将n 条直线排成一个序列,直线2和直线1最多只有一个交点,直线3和直线1,2最多有两个交点,......,直线n 和其他n-1条直线最多有n-1个交点.由此得出n条直线互不平行且无三线共点的最多交点数 ...

  2. PHP UTF-8和Unicode编号互转

    PHP UTF-8和Unicode编号互转 /** * utf-8 转unicode * * @param string $name * @return string */ function utf8 ...

  3. 游戏引擎网络开发者的 64 做与不做 | Part 1 | 客户端方面

    摘要:纵观过去 10 年的游戏领域,单机向网络发展已成为一个非常大的趋势.然而,为游戏添加网络支持的过程中往往存在着大量挑战,这里将为大家揭示游戏引擎网络开发者的 64 个做与不做. [编者按]时下, ...

  4. java基础知识回顾之接口

    /* abstract class AbsDemo { abstract void show1(); abstract void show2(); } 当一个抽象类中的方法都是抽象的时候,这时可以将该 ...

  5. zoj 3057 Beans Game 博弈论

    思路:三维DP,刚开始用记忆化搜索,MLE…… 后来改为直接预处理所有的情况. 总之就是必败态的后继是必胜态!!! 代码如下: #include<iostream> #include< ...

  6. 数据库操作（ADO）

    QTP工具本身自带有数据查询和验证功能,但是使用的人会感觉这个功能使用起来比较麻烦,灵活性和复用性较低,于是我们选择了用脚本调用ADO组件实现数据库的操作,现总结下工作中用到的数据库操作,代码如下: ...

  7. SQL Server 2008管理工具出现 远程过程调用失败0x800706be解决方法

    解决方法 出现此问题是因为在安装 Visual Studio 2012(VS2012) 时,会自动安装 "Microsoft SQL Server 2012 Express LocalDB& ...

  8. 8天学通MongoDB——第二天 细说增删查改

    原文地址:http://www.cnblogs.com/huangxincheng/archive/2012/02/19/2357846.html 看过上一篇,相信大家都会知道如何开启mongodb了 ...

  9. 数学+dp HDOJ 5317 RGCDQ

    题目传送门 /* 题意:给一个区间,问任意两个数的素数因子的GCD最大 数学+dp:预处理出f[i],发现f[i] <= 7,那么用dp[i][j] 记录前i个f[]个数为j的数有几个, dp[ ...

  10. C# Socket 入门1(转)

    1.   服务端程序  1 using System;  2 using System.Collections.Generic;  3 using System.Text;  4 using Syst ...