关注前端开发
关注用户体验

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;
}

点此查看实例展示

最后的话

我必须承认,我并没有介绍太多在最后两个方式在这篇文章中所描述的:Canvas和SVG。这是因为他们是非常强大的,我必须介绍因为未来他很强大。不管怎样,事实是,他们的能力远远大于这些微不足道的三角形。这些方法,建立三角形,让我知道你的想法,你更经常使用的是什么方法?

未经允许不得转载:大前端 » CSS创建三角形(小三角)的几种方法
分享到:更多 ()

评论 34

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #25

    谢谢分享 收藏

    qianrenzhang2年前 (2015-02-10)回复
  2. #24

    非常好的文章!值得推荐阅读

    伊雪儿3年前 (2014-11-04)回复
  3. #23

    技术不行啊 以后多来看看学学

    天津做网站3年前 (2014-07-09)回复
  4. #22

    方法不错,学习了 :mrgreen:

    web前端开发3年前 (2014-06-05)回复
  5. #21

    😳 哈哈哈

    missa_eat3年前 (2014-05-17)回复
  6. #20

    好腻害

    zhm.Me3年前 (2014-04-04)回复
  7. #19

    一直用border,不知道还可以转换编码,学习了

    XH4年前 (2013-12-16)回复
  8. #18

    这个不错

    wsttaotao4年前 (2013-12-07)回复
  9. #17

    feixueck4年前 (2013-10-20)回复
  10. #16

    页面左下角的猜你喜欢会遮盖最后一条评论,真蛋疼啊~我有强迫症,必须要把评论读完。。。

    Sigma4年前 (2013-08-30)回复
    • 这个,是百度那娃干的,我去看看能不能配置下到底不显示

      浩子4年前 (2013-09-02)回复
  11. #15

    nice 原来只知道border的 竟然还有那么多方法

    Vincent_LChan4年前 (2013-08-26)回复
  12. #14

    关于字符创建小三角如果不设置字符宽度高度是会继承父级元素的宽高的,加阴影的话怎么办,

    4年前 (2013-01-28)回复
  13. #13

    css边框是最常用的一种,主要在于兼容性好,而且易于控制样式

    zww5年前 (2013-01-09)回复
  14. #12

    Canvas用来画三角确实是大材小用,本人也比较偏向于用border,虽然用不了css3,但是现在IE6还没有死绝,所以,暂时不考虑啦。

    E龙5年前 (2012-12-04)回复
  15. #11

    讲解得很详细,学习了!

    YY5年前 (2012-12-04)回复
  16. #10

    Canvas和SVG。这是因为他们是非常强大的,我必须介绍因为未来他很强大。不管怎样,事实是,他们的能力远远大于这些微不足道的三角形。这些方法,建立三角形,让我知道你的想法,你更经常使用的是什么方法?

    小周5年前 (2012-11-08)回复
  17. #9

    😛

    teaScripts5年前 (2012-11-04)回复
  18. #8

    css真是博大精深啊!我才刚学,有些看不明,不过先收藏,可能日后有用!

    iuzui5年前 (2012-10-21)回复
  19. #7

    学习了!

    ichendong5年前 (2012-10-20)回复
  20. #6

    有时间也要来学习CSS3了

    热血洒红尘5年前 (2012-10-20)回复
  21. #5

    还是border最实用,ie6可以用dotted来解决border透明的bug噢~

    nornor5年前 (2012-10-18)回复
  22. #4

    强悍的css3

    缤纷涯5年前 (2012-10-18)回复
  23. #3

    很赞,我以前一直用的图片的,不知道还有这么巧的方法

    水中月明5年前 (2012-10-18)回复
  24. #2

    挺别致的啊

    一堵墙5年前 (2012-10-17)回复
  25. #1

    学习了,原来这么简单,一直不知道border可以做三角…

    自说Me话5年前 (2012-10-17)回复
    • 压顶ffddsfdfs

      dsfdfs4年前 (2013-07-24)回复
    • 是啊,非常不错

      wsttaotao4年前 (2013-12-07)回复
      • 评论评论

        嗷嗷嗷3年前 (2014-06-30)回复
        • 嗷嗷嗷

          嗷嗷嗷3年前 (2014-06-30)

themebetter 国内更好的WordPress主题服务商

立即前往