经常看到一些非常漂亮的Tip插件,有一个三角指向目标,非常好看。
之前一直以为上面的那个小三角是用背景图片做出来的,但是今天看了一个网页的源码才知道,使用纯边框属性也可以做出这样的效果来。经过一番搜索和思索之后,终于把其原理吃透了,特发博记下。
一切都还要从HTML元素的边框说起。
在HTML中,一个元素可以具有边框(border)、内边距(padding)、外边距(margin)。
当元素的宽度和高度都不为0时,border呈现出一个四方形环绕在内容的四周。但是当元素的高度和宽度都为0时,情况就变得不同了。Magic Happens!
因为没有高度和宽度(指内容的高度和宽度),元素的四条边会重叠在一起,如下所示:
假设四条边都是一个矩形,那么4条边描述如下:
left-border:(1,2,3,8)
right-border: (4,5,6,7)
top-border: (1,8,7,6)
bottome-border: (2,3,4,5)
因为(1,8)组成的区域是top-border和left-border的重叠区域,因此它们各占一般,以对角线平分,因此标号为8的三角区域属于top-border,标号为1的三角区域属于left-border。其它区域类似。因此实际上四条边的构成是:
left-border:(1,2)
right-border: (5,6)
top-border: (8,7)
bottome-border: (3,4)
它们都是三角形。如果其它的三边都为透明,那么我们就能得到一个三角形。由于没有使用图片,因此能减少流量,实现也非常简单,推荐大家使用。
最后给出第三张图的html代码(chrome下验证正确显示)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
position: relative;
padding: 100px;
}
.show {
border-left: 200px solid #BAC36E;
border-right: 200px solid #BAB26E;
border-top: 200px solid #ABB26E;
border-bottom: 200px solid #BAB2E6;
width: 0;
height:0;
}
</style>
</head>
<body>
<div class="show"></div>
<div style="width:400px;height: 1px;position: absolute; top: 300px;border-top:1px dashed red;"></div>
<div style="height:400px;width: 1px;position: absolute; left: 300px;top:100px;border-left:1px dashed red;"></div>
<p style="position: absolute;left:150px;top:200px;">1</p>
<p style="position: absolute;left:150px;top:350px;">2</p>
<p style="position: absolute;left:250px;top:400px;">3</p>
<p style="position: absolute;left:350px;top:400px;">4</p>
<p style="position: absolute;left:425px;top:350px;">5</p>
<p style="position: absolute;left:425px;top:250px;">6</p>
<p style="position: absolute;left:350px;top:150px;">7</p>
<p style="position: absolute;left:200px;top:150px;">8</p>
</body>
</html>
- 大小: 19.7 KB
- 大小: 8.9 KB
- 大小: 12.1 KB
分享到:
相关推荐
如何使用CSS(14)-边框属性如何使用CSS(14)-边框属性如何使用CSS(14)-边框属性如何使用CSS(14)-边框属性
纯CSS写带边框的三角形
CSS 边框属性(Border 和 Outline) CSS 背景属性(Background) Color 属性 Box 属性 CSS 尺寸属性(Dimension) 内容生成(Generated Content) 可伸缩框属性(Flexible Box) Grid 属性 Hyperlink 属性 CSS 字体...
HTML5&CSS3网页制作:边框属性.pptx
易语言学习进阶标签边框属性例程源码,学习进阶标签边框属性例程
易语言学习进阶标签边框属性源码例程.rar 易语言学习进阶标签边框属性源码例程.rar 易语言学习进阶标签边框属性源码例程.rar 易语言学习进阶标签边框属性源码例程.rar 易语言学习进阶标签边框属性源码例程.rar ...
4.7.5边框属性4.7.5边框属性
使用CSS3边框属性.ppt
第二章,Label 控件[Caption(标题)属性][BorderStyle(边框)属性]
易语言学习进阶标签边框属性源码例程。@易语言资源论坛。
Photoshop制作漂亮图片边框
多图边框制作工具 光影魔术手辅助工具 光影魔术多图边框制作工具 可以随便制作多图边框。 1分钟就可以完成。 非常方便,简单。
表格内外边框线的属性 特备针对表格嵌套表格的时候修改样式比较有用
创建windows窗口并结合opengl绘制三角形
jQuery css3边框动画制作鼠标悬停图片边框动画特效
CSS语法手册(三)文本填充,边框,边界和位置属性(一).pdfCSS语法手册(三)文本填充,边框,边界和位置属性(一).pdfCSS语法手册(三)文本填充,边框,边界和位置属性(一).pdfCSS语法手册(三)文本填充,边框,边界和位置属性(一)...
首先附上效果图: 以上的效果完全是用 css 来实现的,那么是怎么实现的呢? ... 通过特殊字符,利用 css 中的 ...字符制作三角边框</title> <style type=”text/css”> *{margin:0;padding:0;} body{font-fa
学习之路不可停止,最近在研究CSS,今天爱站技术频道的小编就給你们带来这篇CSS border虚线边框属性教程,教大家如何使用css制作网页中的虚线,巩固CSS border属性使用方法,感兴趣的同学可以参考一下。