简述

在前面，我们分享过关于三角的实现方式，主要根据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. 说说php取余运算(%)的那点事

    http://www.phpddt.com/php/php-take-over.html       fmod()与 % 区别   都是取余 fmod是函数 原型float fmod(float x, ...

  2. 纯js页面跳转整理

    js方式的页面跳转1.window.location.href方式    <script language="javascript" type="text/java ...

  3. 【高可用HA】Apache (1) —— Mac下安装Apache Httpd到自定义路径（非/etc/apache2）

    Mac下安装Apache Httpd httpd版本: httpd-2.4.17 参考来源: Tomcat Clustering - A Step By Step Guide Apache HTTP ...

  4. mysql修改数据库表权限

    ps:通常我用的是:1.“grant all on *.* to root@'%' identified by 'yourpassword';”——这个还可以顺带设置密码.2.“flush privi ...

  5. FZU2165 v11(带权的重复覆盖)

    题意:有n个boss,m种武器,每种武器选用的时候需要有一定的花费ci,然后这个武器可以消灭掉其中一些BOSS,问你消灭完所有的BOSS,需要的最少花费是多少. 当时比赛的时候,看到这题以为是什么网络 ...

  6. POJ 2182

    #include <iostream> #define MAXN 8005 using namespace std; int _m[MAXN]; int main() { //freope ...

  7. Sql Server总结

     主键 主键就是数据行的唯一标识.不会重复的列,才能当主键.一个表可以没有主键,但是会非常难以处理,因此没有特殊理由表都要设定主键.主键有两种选用策略:业务主键和逻辑主键. 业务主键是使用有业务意义的 ...

  8. web快速开发c/s软件构架

    很久没用.net winform 做东西,对控件相对比较陌生,另外控件的UI也不是那么好改.公司项目需要有web客户端,同时有软件客户端形式.考虑再三采用webBrowser+html 来实现 .用h ...

  9. hdu 2999 Stone Game, Why are you always there? 博弈论

    SG函数应用!! 代码如下: #include<cstdio> #include<cstring> #include<iostream> #include<c ...

  10. Haproxy安装及配置

    1.安装 # wget http://haproxy.1wt.eu/download/1.3/src/haproxy-1.3.20.tar.gz # tar zcvf haproxy-1.3.20.t ...