简述

在前面，我们分享过关于三角的实现方式，主要根据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. ios 环境配置网址

    http://blog.csdn.net/cwb1128/article/details/18019751

  2. nginx配置解读

    nginx.conf基本配置 ##Start. ##Basic 基础配置 user www www; #运行用户 worker_processes ; #启动进程,通常设置成和cpu的数量相等 wor ...

  3. 金融证券协议FIX/FAST/STEP

    金融信息交换协议FIX是适用于实时证券.金融电子交易的数据通信标准.它是把各类证券金融业务需求流程格式化,使之成为一个可用计 算机语言描述的功能流程,并在每个业务功能接口上统一交换格式.STEP(Se ...

  4. Codeforces 475D CGCDSSQ(分治)

    题意:给你一个序列a[i],对于每个询问xi,求出有多少个(l,r)对使得gcd(al,al+1...ar)=xi. 表面上是询问,其实只要处理出每个可能的gcd有多少个就好了,当左端点固定的时候,随 ...

  5. ResourceBundle使用

    一.认识国际化资源文件   这个类提供软件国际化的捷径.通过此类,可以使您所编写的程序可以:          轻松地本地化或翻译成不同的语言          一次处理多个语言环境          ...

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

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

  7. 一、Android NDK编程预备之Java jni简介

    转自:  http://www.eoeandroid.com/thread-264384-1-1.html 游戏开发 视频教程 博客 淘帖     论坛›eoe·Android应用开发区›Androi ...

  8. （4）用opengl读入off文件生成可执行文件把模型显示出来（未完待续）

    ·找了好几个程序,好像都达不到我的要求,去教程里看看吧! 在往上抛出了这问题,好几天才有人回答,我已经找到程序了 正好的他的分析对我分解程序很有用 这是一个难度比较高的 首先你要分析.off文件结构, ...

  9. arcgis地图操作的资料URL，以供以后查阅

    更改Arcgis Web应用程序的端口号8399: http://help.arcgis.com/zh-cn/arcgisserver/10.0/help/arcgis_server_java_hel ...

  10. BZOJ 1877: [SDOI2009]晨跑 费用流

    1877: [SDOI2009]晨跑 Description Elaxia最近迷恋上了空手道,他为自己设定了一套健身计划,比如俯卧撑.仰卧起坐等 等,不过到目前为止,他坚持下来的只有晨跑. 现在给出一 ...