三角形旋转css_三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办?
切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小。但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不止一种呢:)
纯 CSS 做三角形的方法,目前我知道三种,分别是利用 border 属性,“◆”字符,和 CSS3 transfrom 做 45 度旋转实现的,CSS3的方法是在码头哥的博客上学到的,很感谢你们的分享,前端有你们更精彩!
1.利用 border 属性实现三角形
这个原理很简单,我我们先看下面的图,这是一个边框为 20px 的 div,看他的边框,是个梯形,变化会从这里开始。
CSS:
.triangle{width:30px;height:30px;border-width:20px;border-style:solid;border-color:#e66161 #f3bb5b #94e24f #85bfda;
}
好的,现在我把它的宽和高都设为 0,看看有什么变化。
四个边框都变成三角形了,现在我再把它的左右和下边框的颜色都设成透明或和背景颜色相同的颜色,就出来我们想要的三角形了,推荐把边框设置成透明,这样拓展性更好。
注:IE6下把边框设置成 transparent 时会出现黑影,并不会透明,把 border-style 设置成 dashed 可以解决。
CSS:
.triangle{width:0;height:0;border-width:20px;border-style:solid dashed dashed dashed;border-color:#e66161 transparent transparent transparent;
}
如果我们想实现下图的效果该怎么办呢?很简单,做两个小三角,一个是背景色,一个是边框色,然后利用定位重叠在一起,记住他们的定位要相差一个像素。
HTML:
我是利用 border 属性实现的
CSS:
.message-box {position:relative;width:240px;height:60px;line-height:60px;background:#E9FBE4;box-shadow:1px 2px 3px #E9FBE4;border:1px solid #C9E9C0;border-radius:4px;text-align:center;color:#0C7823;
}
.triangle-border {position:absolute;left:30px;overflow:hidden;width:0;height:0;border-width:10px;border-style:solid dashed dashed dashed;
}
.tb-border {bottom:-20px;border-color:#C9E9C0 transparent transparent transparent;
}
.tb-background {bottom:-19px;border-color:#E9FBE4 transparent transparent transparent;
}
2.利用”◆“字符实现三角形
字符实现也是要用两个字符用绝对定位去模拟,只是它不能模拟出三角形,它是个菱形,然后露出半个头,底色又和背景色一样,看上去就像是个三角形了。。
注意:它的大小是由 font-size 决定的,width 和 height 都决定不了,但最好还是加上,这样各个浏览器去生成这个字符的时候能保持一致,我们去写绝对定位的时候就不用写 hack 了。
HTML:
我是利用 ◆ 字符实现的
CSS:
.message-box {position:relative;width:240px;height:60px;line-height:60px;background:#E9FBE4;box-shadow:1px 2px 3px #E9FBE4;border:1px solid #C9E9C0;border-radius:4px;text-align:center;color:#0C7823;
}
.triangle-character {position:absolute;left:30px;overflow:hidden;width:26px;height:26px;font:normal 26px "宋体"; // 字符的大小和字体也有关系哦!}
.tc-border {bottom:-13px;color:#C9E9C0;
}
.tc-background {bottom:-12px;color:#E9FBE4;
}
3.利用 CSS3 transfrom 旋转 45 度实现三角形
先创建一个带 border 的 div ,设置好背景色和相邻的两个边框的颜色,然后选择 45 度,听着很简单是吗,但是利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案很头大,我是没看懂,有看懂的兄弟情赐教啊:)
注:IE6下无效。
HTML:
我是利用 css transfrom 属性字符实现的
CSS:
.message-box {position:relative;width:240px;height:60px;line-height:60px;background:#E9FBE4;box-shadow:1px 2px 3px #E9FBE4;border:1px solid #C9E9C0;border-radius:4px;text-align:center;color:#0C7823;
}
.triangle-css3 {position:absolute;bottom:-8px;bottom:-6px�;left:30px;overflow:hidden;width:13px;height:13px;background:#E9FBE4;border-bottom:1px solid #C9E9C0;border-right:1px solid #C9E9C0;
}
.transform {-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);
}/*ie7-9*/.ie-transform-filter {-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865475,SizingMethod='auto expand')";filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865475,SizingMethod='auto expand');
}
三角形旋转css_三种纯CSS实现三角形的方法相关推荐
- android三角形切图软件,还在为小三角形切图?使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
- CSS:N种使用CSS 绘制三角形的方法
目录 6种使用 CSS 实现三角形的技巧 1.使用 border 绘制三角形 2.使用 linear-gradient 绘制三角形 3.使用 conic-gradient 绘制三角形 4.transf ...
- 纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...
- html css右下角三角形,纯CSS绘制三角形(各种角度)
CSS/HTML 的 纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
- html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
- 纯CSS实现三角形图标
纯Css实现三角形.气泡框的三角形 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rWU68bRK-1647095723236)(C:\Users\zwz\AppDat ...
- html 三种插入css样式的方式
三种插入css样式的方式 一.外链式引入css样式 二.内嵌式使用css样式 三.行内式引入css样式 一.外链式引入css样式 在head标签中使用<link rel="styles ...
- 纯Css实现三角形、气泡框的三角形
纯Css实现三角形 上下左右箭头 左上.左下.右上.右下箭头 气泡框的三角形 上下左右箭头 效果图片 HTML <!-- 向上的三角形 --><div class="tri ...
- css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: 无标题文档 .area { margin:100px a ...
- 图形编程中,旋转的三种表示方法
图形编程中,旋转的三种表示方法分别是:矩阵.欧拉角和四元数. 本文总结这三种表示方法的特点: 性质 矩阵 欧拉角 四元数 在坐标系间转换 能 不能 不能 连续或增量旋转 能,但是转换速度慢 不能 能, ...
最新文章
- VS Code竟然能约会,找对象不看脸,看编程水平
- 【SRIO】2、RapidIO串行物理层的包与控制符号
- [WCF编程]13.并发:服务并发模式
- python 人气高的项目_给大家推荐:五个Python小项目,Github上的人气很高的
- JPDA 利用Eclipse和Tomcat进行远程调试 --转
- html图片查看器工作原理,五分钟了解浏览器的工作原理
- 20应用统计考研复试要点(part26)--简答题
- Windows XP中快速识别真假SVCHOST.EXE
- linux调试-v-n区别,为你分享一些超好用的Unix/Linux 命令技巧
- qt实现点击出现窗口,点击其他任何地方窗口消失
- SharePoint 2013 对象模型操作网站设置菜单
- python 组态_西门子组态WinCC自学入门视频教程资源_48讲
- 10大程序员必逛网站,良心推荐,建议收藏!
- 我国出生率跌破1%,有什么影响?
- 服务器无法定位到现有系统分区,真正解决win7 “安装程序无法定位现有系统分区,也无法创建新的系统分区”的方法...
- 论文阅读笔记《Improving Unsupervised Defect Segmentation by Applying Structural Similarity To Autoencoders》
- 软件项目接单渠道丨软件公司项目接单平台
- 英语学习APP开发解决方案
- Http chunk介绍
- 傻白探索Chiplet,关于EPYC Zen2 的一些理解记录(五)
热门文章
- 纯css三层侧边栏效果
- glassfish配置Oracle数据源,GlassFish链接数据库
- CHD6.3环境中,集中kylin3.0,错误解决.NoClassDefFoundError: org/apache/commons/configuration/ConfigurationE
- 百度、高德、谷歌、火星、wgs84(2000)地图坐标相互转换的JS实现
- 高德地图地址解析经纬度以及经纬度解析地址
- 优化AI搜索引擎,从这3个领域入手!
- 1-7 Burpsuite 爬虫介绍
- NTU RGB-D数据集申请
- 吴恩达深度学习笔记(40)-指数加权平均数优化算法
- 关于启动报错:Field xxxMapper in com.xxx.service.impl.xxxServiceImpl required a bean of type的解决方案