css做三角形横线加小三角,CSS创建三角形（小三角）的几种方法

你可以在很多地方看到三角形(小三角)：tooltips提示框、下拉菜单、甚至在loading载入动画里。不管你喜欢还是不喜欢，这些小元素对各UI元素之间的联系关系式很重要的。

有一些不同的方法来设计并制作一个三角形，在本文中，我将介绍：

编码 图片

假如你已经有了三角形的图片，并且减少HTTP请求，那么将这个图片转换成一个BASE64字符串是最好的解决方案。

有用的工具(用于图片转换成BASE64编码):

优点

你可以按照自己的思想设计阴影，渐变等，然后对其进行转换编码

缺点

你需要使用一个图片编辑软件去设计

对于较大的图片，最终转换成字符串占用大小会很大

旧版本的浏览器，如：IE6/IE7是不兼容的

CSS 边框

这也是一个常用的使用方式，如tooltips信息提示框和下拉菜单。以上的示例，这是一个我最喜欢的方法创建小而且有用的三角形。

优点

很容易的通过修改一些CSS代码属性值而更改颜色和大小

这是一个跨浏览器的解决方案。

缺点

这个方式使用的是border,所以你不能添加阴影、渐变、和其他一些CSS3效果

请记住，IE6是不支持透明边界的-如果你关心这个问题

如果你使用火狐浏览器，要知道，CSS的“透明”有时可能不会是透明的，特别是在对角线边框，越多更多 here.

HTML 字符

它是基于使用可用的Unicode字符列表的字符。

优点

它是一个跨浏览器的技术

您可以使用CSS3的text-shadow属性添加阴影。

缺点

不能使用太多的CSS3效果，除了使用文字阴影。

在所有的浏览器，这是相当不可能实现像素完美。

CSS 旋转正方形

理论上,这种方式，你需要使用两个内容块，但是，并没有限制是使用两个元素，所以可以使用一个元素加一个伪元素。

创建一个内容里。例如100×100像素 – 这将包含旋转块。

旋转包含的这个块45度，从而获得一个菱形

将菱形的块向顶部便宜，然后设置溢出，设置父层容器截断

There you go!

优点

CSS3阴影，渐变等可以更多的使用

缺点

这个解决方案不是跨浏览器的,首先是因为CSS3旋转。

HTML5 Canvas

在你的HTML文件中有以下的canvas元素：

Triangle

这里的如何使用JavaScript绘制一个三角形：

var canvas = document.getElementById('triangle');

var context = canvas.getContext('2d');

context.beginPath();

context.moveTo(0, 0);

context.lineTo(100, 0);

context.lineTo(50, 100);

context.closePath();

context.fillStyle = "rgb(78, 193, 243)";

context.fill();

SVG (Scalable Vector Graphics)

这是如何在您的标签，你可以定义一个内联SVG三角形：

然后，只需添加一些样式：

.svg-triangle{

margin: 0 auto;

width: 100px;

height: 100px;

}

.svg-triangle polygon {

fill:#98d02e;

stroke:#65b81d;

stroke-width:2;

}

纯css写带小三角对话框

在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

CSS实现导航条Tab的三种方法

前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

CentOS7创建本地YUM源的三种方法

这篇文章主要介绍了CentOS7创建本地YUM源的三种方法,本文讲解了使用CentOS光盘作为本地yum源.如何为CentOS创建公共镜像.创建完全自定义的本地源等内容,需要的朋友可以参考下     ...

Css三栏布局自适应实现几种方法

Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

Windows 10 应用创建模糊背景窗口的三种方法

原文 Windows 10 应用创建模糊背景窗口的三种方法 现代的操作系统中创建一张图片的高斯模糊效果非常容易,不过如果要在窗口中获得模糊支持就需要操作系统的原生支持了.iOS/Mac 和 Windo ...

windows下去掉快捷方式图标的小箭头的几种方法

去掉快捷方式图标的小箭头的几种方法 第一种: 点开始菜单,点运行,输入以下命令后回车.即可解决 cmd /k reg delete "HKEY_CLASSES_ROOT\lnkfile&qu ...

CSS + ul li 横向排列的两种方法

ouch", "chair", "table", "stove"); 数组 数组．一个数组是多个标 ...

Objetive-C 中的相等比较

1.== 用于比较两个对象的地址是否相同 1)需要注意的是相同的短字符串,一定大小整数(nsnumber),Objetive-C 底层会做cache,两个对象,指向同一个地址. 例如: NSStrin ...

Java多线程高并发学习笔记(三)——深入理解线程池

线程池最核心的一个类:ThreadPoolExecutor. 看一下该类的构造器: public ThreadPoolExecutor(int paramInt1, int paramInt2, lo ...

verilog中timescale

1. `timescale `timescale是Verilog中的预编译指令,指定位于它后边的module的时间单位和时间精度,直到遇到新的`timescale指令或者`resetall指令.它的语 ...

docker_flannel

目录 一.安装etcd 安装 运行 验证 二.安装和配置 flannel 三. Docker 中使用 flannel 配置 Docker 连接 flannel 容器连接到 flannel 网络 四.f ...