目录
简介
优点
原理
1. 先创建一个 div
2. 然后给 div 设定边框.
3. 给 div 的四个边框都设置不同的颜色
4. 把宽度和高度都变成 0
5. 其余角为透明
6. 兼容 IE6 浏览器
造成这样的原因是:
最简单的解决办法:(后面添加)
其他的解决办法:
7. 解决内联元素的三角显示问题
为什么会有这个问题
解决办法
1. 去掉固定的内容高度
2. 将内联元素转化为块级元素或者行内块元素
3. 将元素脱标 (如果涉及特殊的布局可以直接使用)
最终代码
扩展
有角度的三角
有一个角是直角的三角
箭头
对话框
兼容 IE8 的小圆角矩形
利用 CSS3 旋转来制作三角形
简介
三角的做法有好几种:
图片, 精灵图 (网易)
字体图标 (京东)
纯代码写 (亚马逊)
这里主要介绍的纯代码写的.
优点
代码写的三角, 不管大小是多少, 是不失真的.
代码运行比图片更快.
如果项目中没有引用字体图标, 代码写是比较可靠的.
原理
原理就是使用 CSS 的盒模型中的 border 属性
使用 border 属性就可以实现一个兼容性很好的三角图形效果, 其底层受到 border-style 的 inseet/outset 影响, 边框 3D 效果在互联网早期还是很流行的,.
1. 先创建一个 div
<div></div>
2. 然后给 div 设定边框.
- div{
- width:200px;
- height:100px;
- border:10px solid red;
- }
可以看到效果:
3. 给 div 的四个边框都设置不同的颜色
- div{
- width:200px;
- height:100px;
- border-left:10px solid red;
- border-top:10px solid green;
- border-right:10px solid blue;
- border-bottom:10px solid yellow;
- }
可以看到以下效果:
可以看到两个 border 交叉的地方, 有斜边存在.
4. 把宽度和高度都变成 0
- div{
- width:0px;
- height:0px;
- border-left:10px solid red;
- border-top:10px solid green;
- border-right:10px solid blue;
- border-bottom:10px solid yellow;
- }
- /* 也可以这么写 */
- div{
- width:0px;
- height:0px;
- border:10px solid;
- border-color:red green blue yellow;
- }
可以看到以下效果:
这个时候就看得很明显了, 出现了四个三角. 那如果要出现一个, 那么就将其他的三个弄成透明色就可以了.
这个就是三角形的由来.
5. 其余角为透明
这里的设置也遵循 上右下左 的顺序, 把不需要的角弄成透明色.
- div{
- width:0px;
- height:0px;
- border-width:10px;
- border-color:#f00 transparent transparent transparent;
- border-style:solid;
- }
- /* 也可以再进行合并 */
- div{
- width:0px;
- height:0px;
- border:10px solid;
- border-color:#f00 transparent transparent transparent;
- }
这样一个三角就完成了. 那么问题来了, 那就是兼容问题, IE6 的兼容问题, 如果不要求兼容 IE6 可以忽略下一步.
6. 兼容 IE6 浏览器
同样的一个三角, 在 IE6 的显示是什么呢?
造成这样的原因是:
IE6 不支持 border 的 transparent
IE6 的高度最小为 19px, 不支持高度为 0
在 IE6 下面, 如果想把元素例如 div 设置成 19 像素以下的高度就设置不了了. 这是因为 IE6 浏览器里面有个默认的高度, IE6 下这个问题是因为默认的行高造成的.
最简单的解决办法:(后面添加)
- div{
- /* 不支持 transparent*/
- border-style:solid dashed dashed dashed;
- /* 高度最小不为 0*/
- overflow:hidden;
- }
其他的解决办法:
查了查网上的, 如果是 IE6 不支持 transparent, 可以这么做:
- div{
- border:solid 1px transparent;
- _border-color:tomato;
- _filter:chroma(color=tomato);
- }
所以我觉得用在这里也可以, BUT 没有亲测过, 如果哪位小可爱测过可以请告知我 ^ ^.
- div{
- width:0px;
- height:0px;
- margin:100px auto;
- border-width:10px;
- border-style:solid;
- border-color:#f00 transparent transparent transparent;
- _border-color:#f00 tomato tomato tomato;
- _filter:chroma(color=tomato);
- }
如果是解决 IE6 的高度问题 (也可以前面加下划线, 表示兼容的 IE6)
- div{
- height:0;
- font-size:0;
- line-height:0;
- overflow:hidden;
- }
7. 解决内联元素的三角显示问题
为什么会有这个问题
因为我们刚才用 < div > 去制作三角, 当然我们经常会使用 < em><i > 或者伪元素去做一些小图标. 那么在显示上面, 可能会有问题. 下面的代码:
- <style>
- em{
- width: 0;
- height: 0;
- border-width: 50px;
- border-color: transparent transparent transparent #f40;
- border-style: solid;
- }
- </style>
- <em></em>
可以看到页面是这个样子的:
为什么是这个样子的, 那么我们再看的仔细一点. 它实际是这个样子的.
造成这样的原因
是因为行内元素自己有固定的高度, 不能设置宽高为 0, 所以上面下面都是 50px 没有问题, 但是中间撑开了距离, 也就有了梯形的效果.
而且如果上面没有块元素的时候, 是从内联元素的内容开始算起的, 所以上面的 border 就会到浏览器可视区域的上面.
解决办法
这个有很多的办法:
1. 去掉固定的内容高度
使用 font-size:0; 可以去掉内容的固定高度.
- em{
- border-width: 50px;
- border-color: transparent transparent transparent #f40;
- border-style: solid;
- font-size: 0;
- }
2. 将内联元素转化为块级元素或者行内块元素
- em{
- border-width: 50px;
- border-color: transparent transparent transparent #f40;
- border-style: solid;
- display: block; /* 也可以是 inline-block*/
- }
3. 将元素脱标 (如果涉及特殊的布局可以直接使用)
- /* 脱标 */
- em{
- border-width: 50px;
- border-color: transparent transparent transparent #f40;
- border-style: solid;
- position: absolute;
- top:0;
- left:0;
- }
- /*or 浮动 */
- em{
- border-width: 50px;
- border-color: transparent transparent transparent #f40;
- border-style: solid;
- float:left;
- }
最终代码
下面就是兼容了 IE6 版本的三角代码.
- div{
- width:0px; /* 设置宽高为 0*/
- height:0px;/* 可不写 */
- border-width:10px; /* 数值控制三角的大小, 垂直的位置 */
- border-color:#f00 transparent transparent transparent;/* 上右下左, transparent 是透明的 */
- border-style:solid dashed dashed dashed;/* 设置边框样式, dashed 是兼容 IE6 写的 */
- overflow:hidden;/* 兼容 IE6 最小高度不为 0 写的 */
- }
改变 border-width, 三角变大, 是不失真的. 很清晰.
== 三角制作完成.==
扩展
有角度的三角
上面制作的都是 45 度的三角, 三角可以通过 border 的高度宽度确定角度.
比如这样一个三角, 只需要确定上下的和左右的宽度不一样即可.
- div{
- width: 0px;
- height: 0px;
- margin: 100px auto;
- border-width:10px 30px;
- border-color:transparent transparent transparent red;
- border-style:solid;
- }
有一个角是直角的三角
观察可以看到, 是上面和右面的三角同时设置成一个颜色. 就会出现直角的三角.
- div{
- width: 0;
- border-width: 20px 10px;
- border-style: solid;
- border-color: red red transparent transparent;
- }
箭头
其实原理也简单, 就是两个三角重叠在一起. 上面的三角就是背景的颜色
- <style type="text/css">
- .san {
- border-width: 50px;
- border-color: transparent transparent transparent #f40;
- border-style: solid;
- position: relative;
- }
- .si {
- border-width: 30px;
- border-color: transparent transparent transparent #fff;
- border-style: solid;
- position: absolute;
- left: -50px;
- top: -30px;
- }
- </style>
- <!--html 结构 -->
- <div class="san">
- <div class="si"></div>
- </div>
对话框
这个使用伪元素去做就很方便.
- <style type="text/css">
- div{
- width: 150px;
- padding: 10px;
- line-height: 20px;
- color: #9c623f;
- background-color: rgba(255, 236, 193, 0.72);
- border-radius: 10px;
- position: relative;
- }
- div::before{
- content:"";
- border-width: 10px;
- border-color:transparent rgba(255, 236, 193, 0.72) transparent transparent;
- border-style: solid;
- position: absolute;
- left: -20px;
- top: 10px;
- }
- </style>
- <div class="select-toast"> 早安, 哈哈! 今天天气不错, 很好!</div>
兼容 IE8 的小圆角矩形
原理就是一个矩形, 上面和下面使用伪元素设置.
before 是方向朝上的梯形, after 是方向朝下的梯形.
注意不要太宽了, 否则会变成切边矩形, 这样就可以避免 border-radius 的兼容问题
- <style type="text/css">
- div{
- width: 140px;
- height: 40px;
- background-color: rgb(244,121,128);
- position: relative;
- }
- div:before,
- div:after {
- content: "";
- position: absolute;
- left: 0; right: 0;
- border-style: solid;
- }
- div:before {
- top: -3px;
- border-width: 0 3px 3px;
- border-color: transparent transparent red;
- }
- div:after {
- bottom: -3px;
- border-width: 3px 3px 0;
- border-color: red transparent transparent;
- }
- </style>
- <div></div>
利用 css3 旋转来制作三角形
如果可以用到 css3, 也可以使用到 transform 的 rotate 属性
大概原理图就是: 将里面的旋转 45 度, 外面的 overflow:hidden 即可
- <style type="text/css">
- i,s{
- text-decoration: none;
- font-style: normal;
- display: block;
- width: 20px;
- height: 20px;
- }
- i{
- position: relative;
- overflow: hidden;
- }
- s{
- position: absolute;
- top:-14px;
- background: yellowgreen;
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- }
- </style>
- <!--html 结构 -->
- <i>
- <s></s>
- </i>
最终效果图是:
@version1.0--2018-11-8-- 创建《CSS 三角的写法 (兼容 IE6)》
©burning_韵七七
来源: https://juejin.im/post/5be407d8e51d452add4d81a0