以前做三角形图标一直是用图片，或者css3旋转，现在才发现原来还有这么简单的三角形
div {
border: 10px solid transparent;
border-bottom: 10px solid #000;
width: 0;
}
只要这么简单的三行css就可以实现一个三角形！
时间： 2024-12-27 18:42:37
纯css做三角形图标
纯css做三角形图标的相关文章
纯css做三角形形状
1 /* create an arrow that points up */ 2 div.arrow-up { 3 width:0px; 4 height:0px; 5 border-left:5px solid transparent; /* left arrow slant */ 6 border-right:5px solid transparent; /* right arrow slant */ 7 border-bottom:5px solid #2f2f2f; /* bottom,
三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不止一种呢:) 纯 CSS 做三角形的方法,目前我知道三种,分别是利用 border 属性,“◆”字符,和 CSS3 transfrom 做 45 度旋转实现的,CSS3的方法是在码头哥的博客上学到的,很感谢你们的分享,前端有你们更精彩! 1.利用 border 属性实现三角形 这个原理很简单,我我们
纯css实现三角形
先看一个笔试题: 请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:<div id=”demo”></div> 一开始看到这个题目,我有些不知如何下手,之前看到这种小三角形,以为只是一个png,都没有注意过这个问题. 废话不多说,进入正题:可以将那个三角形理解为一个小正方形,先将其width和height设置为0,然后设置其border宽度为10px(见下图). 1 { 2 width: 0; 3 height: 0; 4 border: 10px solid #000
纯CSS写三角形-border法[基础篇]
纯CSS写三角形-border法[基础篇] 注意:所有知识点将不考虑IE6 (￣▽￣") 在制作如上图所示的三角形时,我们基本采用PNG或GIF图片来实现,这种形式在编写代码时较容易掌握,所以得到普遍制作者的认可.但涉及到后期优化维护的话,就需要不断的修改图片,在图形编辑器和代码编辑器之间来回切换,这无疑是加大了工作量.所以,如果单纯利用CSS来写的话,不但可以减少网站零碎图片的数量.减少了加载图片的时间,而且在修改时不用再重新切图,减少工作量. CSS3出现以后,“方形旋转45度”制作三角形的
CSS实现三角形图标原理解析
CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框样式使用border-top 设置上边框,一般单独设置上边框样式使用border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为CSS下划线效果应用基本用法: // 为引用 class="border-four" 的盒子对象设置1px像素红色实线边框.bord
重新整理：纯CSS写三角形
整理一下几年前写的知识点,关于如何用纯CSS写三角形. 方法1:利用CSS3旋转正方形 知识点: transform:rotate(45deg) 兼容性:FF/Chrome/IE9+ html: <div class="imgbox1"> <img src="images/200x300.jpg" alt="" /> <p>内容文字内容文字内容文字内容文字</p> </div> CSS:
纯CSS写三角形-border法[晋级篇01]
纯CSS写三角形-border法[晋级篇01] 注意:所有知识点将不考虑IE6 (￣▽￣") (1)有边框的三角形 在上一篇完成简单的三角形border法后,我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角
css 制作三角形图标 不支持IE6
.triangle { width: 10px; height: 10px; overflow: hidden; border-left: 4px solid rgba(0, 224, 255, 1); border-right: 4px solid rgb(0, 255, 10); border-top: 4px solid #ff0; border-bottom: 4px solid #ca0309; } 效果: 把10px改成0后: 去掉border-top这一句: 把border-lef
纯css做幻灯片效果
css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS做幻灯片</title> </head> <style> @keyframes slide { 0% { backgroun