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元素:

<canvas id="triangle" height="100" width="100">Triangle</canvas>

这里的如何使用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 xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
  <polygon points="0,0 100,0 50,100"/>
</svg>

然后,只需添加一些样式:

.svg-triangle{
	margin: 0 auto;
	width: 100px;
	height: 100px;
}		

.svg-triangle polygon {
	fill:#98d02e;
	stroke:#65b81d;
	stroke-width:2;
}

点此查看实例展示

时间: 2024-10-07 17:56:01

CSS创建三角形(小三角)的几种方法的相关文章

纯css写带小三角对话框

在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个三角形,如果想要带边框的三角形,则可以两个重叠使用.代码如下: <div class="box2"> 纯css写带小三角对话框 </div> .box2{ float:left; position:relative; width:200px; height:100p

利用JavaScript如何创建一个table表格[第2种方法]

创建一个五行五列的表格(使用循环) <style> td{border:1px solid #ccc;} </style> <script> window.onload=function(){ var oTable=document.createElement("table"); var row; var cell; for(var i=0;i<5;i++){ row=document.createElement("tr")

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

Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏布局自适应: 代码如下 复制代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>绝对定位法</title> <style>  .pa

BAP中创建动态内表的三种方法(转载)

BAP中创建动态内表的三种方法 第一种: 如果我们需要的动态内表字段或者动态工作区和数据字典中的类型一致,可以直接使用CREATE DATA生成,当然也可以是自定义类型. 比如要产生和数据表MARA结构一致的动态内表: DATA : DY_TABLE TYPE REF TO DATA, WA_LINE TYPE REF TO DATA. FIELD-SYMBOLS: <DYN_TABLE> TYPE STANDARD TABLE . CREATE DATA DY_TABLE TYPE TABL

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

原文 Windows 10 应用创建模糊背景窗口的三种方法 现代的操作系统中创建一张图片的高斯模糊效果非常容易,不过如果要在窗口中获得模糊支持就需要操作系统的原生支持了.iOS/Mac 和 Windows 系统都对此有支持. 本文将介绍三种创建模糊背景窗口的方法.有人可能喜欢称之为毛玻璃窗口.亚克力窗口. This post is written in multiple languages. Please select yours: 最早我是在 StackOverflow 上回答一位网友的提问时

【小技巧】只用css实现带小三角的对话框样式

一个小小的技巧: 如图所示,这种小三角,不用图片,只用css怎么实现呢? 直接上代码吧: <!DOCTYPE html> <html> <head> <title>三角</title> <style> .main{width: 100px;border: 1px solid red;height: 100px;position: relative;} .box{width: 0;height: 0;border-style: soli

转载:CSS实现三栏布局的四种方法示例

转载网址:http://www.jb51.net/css/529846.html 前言 其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具体的介绍了三栏布局的四种方法,并介绍了它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 HTML代码如下: <div class="left&quo

css清除浮动之常用的5种方法

css关于清除浮动 本文参考了博客http://www.jb51.net/css/173023.html后经过本人的实践总结除了下面几种清除浮动的最常用的方法. .div1 { background-color: #00c; } .left { float:left; width: 200px; height:200px; background-color: #0c0; } .right { float:right; width: 200px; height:200px; background-

css实现三栏布局的几种方法及优缺点

三栏布局,顾名思义就是两边固定,中间自适应. 三栏布局在实际的开发十分常见,比如淘宝网的首页,就是个典型的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应. 我们不妨假定这样一个布局:高度已知,其中左栏.右栏宽度各为300px,中间自适应,可以通过几种方法来实现?以及各自的优缺点是什么? 一.浮动布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l