html中小三角怎么打出来,css实现小三角(原理)
效果图如图1所示:(简单示范,有点丑,莫介意)
PS:兼容IE,FF , chrome ,360安全浏览器
先讲下原理吧,如图2所示:
这个div的样式如下所示:
div{
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid;
border-color: lightgreen pink yellow lightblue;
}
解释:当div的宽高为0时,设border的宽度并设颜色,会发现div像是被分割为4个小三角形,
因此当我们要其中一个小三角时,只需要将其它三个隐藏即可(方法:把那三条边颜色设为transparent即可)。
对应的CSS代码:
#triangle{
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid;
border-color: transparent transparent yellow transparent;
}
为了让它尽可能适应各种浏览器,我们多添加几行代码(主要是解决IE的兼容问题):
1 #triangle{
2 width: 0px;
3 height: 0px;
4 width: 40px;
5 height: 40px;
6 font-size: 0;
7 line-height: 0;
8 overflow: hidden;
9 border-width: 20px;
10 border-style: dashed dashed solid dashed;
11 border-color: transparent transparent yellow transparent;
}
解释:
①border-color: transparent transparent yellow transparent;
因为我们要的是上三角,根据图2,我们要保留的是下边框,故把其他三条边设为transparent;
②border-style: dashed dashed solid dashed;
把其他三边设为dashed,是因为IE6不支持透明属性transparent,故我们把其它三边的样式设为dashed,dashed在边框宽度很大时,会隐藏。(因为我的电脑没有ie6,所以没有实践过,这一点有点抱歉)
③font-size: 0; line-height: 0; overflow: hidden;
如果不加这三句,会出现以下效果:
即在IE下,出现的不是三角形,而是梯形。
④最后多加了两句css hack: width: 40px; height: 40px;
当时用IE测试效果时,我发现根本找不到小三角,在网上搜各种博客也搜不到相关问题,后来随手加了句width&height的样式,小三角就出现了,感觉应该是在IE下,div的宽高是包括border的(对于这点还是不太懂,****希望有大牛给予解答)。*
**为了解决IE下的这个问题,我最后就加了这两句css hack。如果觉得不保险,还可以再加上" _width: 40px; height: 40px;"
**PS: *① IE6和IE7能识别"",IE6能识别"",具体搜索“CSS hack”。
② width应设为 border-width 的两倍,height同理。
对于下三角,左三角,右三角,只需改变上三角中的两句CSS即可,其他无需改变,改变的代码分别如下所示。
下三角:
border-style: solid dashed dashed dashed;
border-color: lightgreen transparent transparent transparent;
左三角:
border-style: dashed solid dashed dashed;
border-color: transparent pink transparent transparent;
右三角:
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent lightblue;
最后,给出效果图1的代码:
/* css */
*{
margin: 0px;
padding: 0px;
text-align: center;
}
#container{
position: relative; //这句很重要,因为小三角是相对父元素#container来绝对定位的
width: 50px;
height: 40px;
border:1px solid lightblue;
margin: 200px auto;
padding: 20px;
}
#chat{
width: 50px;
height: 40px;
background-color: lightblue;
}
#triangle{
position: absolute; //设置小三角绝对定位
width: 0px;
height: 0px;
*width: 14px;
*height: 14px;
font-size: 0;
line-height: 0;
overflow: hidden;
border-width: 7px;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent lightblue;
top: 33px; //33px:父元素#container的内边距20px + #chat宽度的一半20px - 自身元素#triangle的边宽7px =33px
left: 70px; //70px: #chat的宽度50px + 父元素#container的内边距20px =70px
}
/* html代码 */
如有不足之处,欢迎批评建议, O(∩_∩)O谢谢
html中小三角怎么打出来,css实现小三角(原理)相关推荐
- 详情小三角css,CSS实现小三角
CSS实现小三角三角的颜色可以根据需要设置,白色的三角只需要把 border-left.border-right设置为transparent,然后border-bottom设置为#fff就可以了 更加 ...
- css补充(1):css实现小三角,精灵图,字体图标
文章目录 一.css实现小三角 1.1 三角形实现 二.精灵图的使用 三.字体图标 一.css实现小三角 1.1 三角形实现 html: <div class="sanjiao&quo ...
- 使用css绘制小三角
<div style="width:0;height:0;overflow: hidden;border-top:4px solid transparent;border-left:4 ...
- 滑动门套滑动门css,JS+CSS实现带小三角指引的滑动门效果
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡, ...
- CSS如何实现小三角
CSS如何实现小三角 实现原理: 默认情况下div为内容盒子,也就是div的宽高是作用于内容的空间宽度和高度(或者内容宽高就是盒子宽高).那我们就可以把div盒子宽高设为0,然后让边框撑开盒子.具体语 ...
- Qt如何绘制带小三角的消息框
一.简述 本篇文章讲述的是如何绘制出一个带小三角的窗口,请看下图,说白了就是绘制一个Rect + Triangle ,然后添加外部阴影效果. 二.代码之路 ArrowWidget.h #ifndef ...
- css border制作小三角形状及应用(兼容IE6)
原理 css盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到 ...
- CSS创建三角形(小三角)的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
- CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
转载自:https://blog.csdn.net/lzgs_4/article/details/46827761 在网页中,经常会用到各种Icon,如果老是麻烦设计狮画出来不免有些不好意思,所以有时 ...
最新文章
- 如何实现链接只能被点击一次
- ServletResponse-中文名的下载
- 2007年你必须学习的10项.NET技术
- 清华姚班/智班2020级新生来了!中国奥数新晋“一姐”在列,湖南、湖北人数最多...
- 一个由跨平台产生的浮点数bug | 有你意想不到的结果
- RMAN-06214问题处理
- DPDK 大页内存实现(二十二)
- mysql myisam
- IOS设计模式之二(门面模式,装饰器模式)
- 前端动画 wow.js 效果
- discuz仿手游控游戏论坛商业版网站模板
- Java移位运算符:<<,>>,>>>
- win32API中文参考手册
- bitbake 编译错误集
- CI/CD到底是什么?看完就能很快理解
- 机器学习练习 6 - Support Vector Machines(支持向量机)
- linux中/etc/hosts文件的含义
- 微信授权登录:移动端[unionid](一)
- WordPress绑定多个域名和禁止搜索引擎收录非主域名的方法
- 什么IT项目可以兼职在学校做