简述

在前面，我们分享过关于三角的实现方式，主要根据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. DreamFactory service platform 将DB发布成restful service

    PPT:http://www.slideshare.net/DreamFactorySoftware/angularjs-and-rest-made-simple blog:http://blog.d ...

  2. HDOJ 2079 选课时间(母函数)

    选课时间(题目已修改,注意读题) Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  3. 表单中<form>的enctype属性

    application/x-www-form-urlencoded.multipart/form-data.text/plain 上传文件的表单中<form>要加属性enctype=&qu ...

  4. 100个经典的C算法

    1.题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔 子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数 为多少? #include<stdio.h&g ...

  5. delphi 网络函数

    Delphi网络函数 unit net; interfaceusessysutils,windows,dialogs,winsock,classes,comobj,wininet; //得到本机的局域 ...

  6. shell如何自动输入密码

    shell如何自动输入密码 http://linux.ctocio.com.cn/171/12162171.shtml

  7. Nutch配置：nutch-default.xml详解

    /×××××××××××××××××××××××××××××××××××××××××/ Author:xxx0624 HomePage:http://www.cnblogs.com/xxx0624/ ...

  8. hdu 3590 PP and QQ 博弈论

    思路: 在贾志豪神牛的论文 里,这两种游戏都有 其中树的删边游戏:叶子节点的SG值为0:中间节点的SG值为它的所有子节点的SG值加1 后的异或和. ANTI-SG:先手必胜当且仅当:(1)游戏的SG函 ...

  9. WCF分布式开发步步为赢(10):请求应答（Request-Reply）、单向操作(One-Way)、回调操作(Call Back).

    WCF除了支持经典的请求应答(Request-Reply)模式外,还提供了什么操作调用模式,他们有什么不同以及我们如何在开发中使用这些操作调用模式.今天本节文章里会详细介绍.WCF分布式开发步步为赢( ...

  10. java多线程浅谈

    当一个线程进入一个对象的一个synchronized方法后,其它线程是否可进入此对象的其它方法? 分这几种情况:    1.其他方法前是否加了synchronized关键字,如果没加,则能.    2 ...