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;
}
CSS创建三角形(小三角)的几种方法的更多相关文章
- 纯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 横向排列的两种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css border制作小三角形状及气泡框(兼容IE6)
先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...
- 【小技巧】只用css实现带小三角的对话框样式
一个小小的技巧: 如图所示,这种小三角,不用图片,只用css怎么实现呢? 直接上代码吧: <!DOCTYPE html> <html> <head> <tit ...
随机推荐
- C++多态公有继承
面向对象的三个基本特征 面向对象的三个基本特征是:封装.继承.多态.其中,封装可以隐藏实现细节,使得代码模块化:继承可以扩展已存在的代码模块(类):它们的目的都是为了——代码重用.而多态则是为了实现另 ...
- C++代码重用——包含
#ifndef PAIRS_H #define PAIRS_H #include <iostream> #include <valarray> template <cla ...
- TestPointer
C++ Code 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...
- codeforces B. Xenia and Spies 解题报告
题目链接:http://codeforces.com/problemset/problem/342/B 题目意思:有n个spy,编号从1-n,从左到右排列.现在的任务是,spy s要把信息传递到spy ...
- ubuntu下java环境变量配置
转自:http://blog.csdn.net/tenpage/article/details/7215810 如果是配置java环境,请参照这篇,更简单:在Ubuntu 12.04 LTS上安装JD ...
- HDU 5514 Frogs (容斥原理+因子分解)
题目链接 题意:有n只青蛙,m个石头(围成圆圈).第i只青蛙每次只能条ai个石头,问最后所有青蛙跳过的石头的下标总和是多少? 题解:暴力肯定会超时,首先分解出m的因子,自己本身不用分,因为石头编号是0 ...
- iOS通过设置info.plist参数使用iTunes导入导出Documents目录下的文件
参考网址: http://my.oschina.net/hmj/blog/112592 http://www.cnblogs.com/taintain1984/archive/2013/05/27/3 ...
- Binary Search--二分查找
Binary Search--二分查找 采用二分法查找时,数据需是排好序的. 基本思想:假设数据是按升序排序的,对于给定值x,从序列的中间位置开始比较,如果当前位置值等于x,则查找成功:若x小于当前位 ...
- Android开发之onClick事件的三种写法
package a.a; import android.app.Activity; import android.os.Bundle; import android.view.View; import ...
- Windows环境下配置Vim为Python的IDE
(一)安装Python 2.7 在官网下载Python,并安装,我的安装路径是D:\Program Files\Python.安装完成后编辑环境变量Path,在其后添加;D:\Program File ...