有在使用Facebook的朋友,应该会发现到,自从Facebook将条列式改成时间轴的架构后,每当发表新讯息时,每个讯息都会像对框话的形式来呈现,虽然说这不是什么新技术,但先前梅干都是将那对话框的,三角形制作成图档,再将它定位显示到该显示的任置,虽然说没什么问题,但若中间突然修改的颜色或边框时,这下就得重新再绘制一次,因此梅干便在想,或许可用Html5来绘制那三角形,如此一来就可省去,每当色彩改变时,重制的麻烦,但就目前Html5的部分,使用上还是相当的受限,因此梅干爬了一些文章,找到一个相当棒的作法,竟然直接用CSS的语法就可实作出来,这还真是让梅干想都没想到,竟然可以这样子用,而梅干也花了点时间,将对话框四个上向箭头的CSS给设定好了,因此各位可以直接套用喔!
首先,先定义一个边框的样式与色彩。
由于边框是由内向外画,且会看到个边的接角,正好都是45度角。
接着再将宽、高设成0。
有没有点感觉啦!
这时再把其它边的颜色改成透明。
三角形出现啦!而有了这概念后,就可以开始来制作对话框了。
CSS样式如下:
<style type = "text/css" >
.mwt_border {
width : 250px ;
height : 90px ;
text-align : center ;
background : #fff ;
position : relative ;
border : solid 1px #333 ;
margin : 30px ;
padding : 30px ;
}
/*箭头右*/
.mwt_border .arrow_r_int {
width : 0px ;
height : 0px ;
border-width : 15px ;
border-style : solid ;
border-color : transparent transparent transparent #333 ;
position : absolute ;
top : 20 % ;
right : -30px ;
}
/*箭头右-边框*/
.mwt_border .arrow_r_out {
width : 0px ;
height : 0px ;
border-width : 15px ;
border-style : solid ;
border-color : transparent transparent transparent #fff ;
position : absolute ;
top : 20 % ;
right : -29px ;
}
/*箭头左*/
.mwt_border .arrow_l_int {
width : 0px ;
height : 0px ;
border-width : 15px ;
border-style : solid ;
border-color : transparent #333 transparent transparent ;
position : absolute ;
top : 20 % ;
left : -30px ;
}
/*箭头左-边框*/
.mwt_border .arrow_l_out {
width : 0px ;
height : 0px ;
border-width : 15px ;
border-style : solid ;
border-color : transparent #fff transparent transparent ;
position : absolute ;
top : 20 % ;
left : -29px ;
}
/*箭头上*/
.mwt_border .arrow_t_int {
width : 0px ;
height : 0px ;
border-width : 15px ;
border-style : solid ;
border-color : transparent transparent #333 transparent ;
position : absolute ;
top : -30px ;
left : 40px ;
}
/*箭头上-边框*/
.mwt_border .arrow_t_out {
width : 0px ;
height : 0px ;
border-width : 15px ;
border-style : solid ;
border-color : transparent transparent #fff transparent ;
position : absolute ;
top : -29px ;
left : 40px ;
}
/*箭头下*/
.mwt_border .arrow_b_int {
width : 0px ;
height : 0px ;
border-width : 15px ;
border-style : solid ;
border-color : #333 transparent transparent transparent ;
position : absolute ;
bottom : -30px ;
right : 50px ;
}
/*箭头下-边框*/
.mwt_border .arrow_b_out {
width : 0px ;
height : 0px ;
border-width : 15px ;
border-style : solid ;
border-color : #fff transparent transparent transparent ;
position : absolute ;
bottom : -29px ;
right : 50px ;
}
</style >
HTML结构如下:
<div class = "mwt_border" >
<span class = "arrow_t_int" > </span >
<span class = "arrow_t_out" > </span >
CSS制作对话框效果-箭头上
</div >
<div class = "mwt_border" >
<span class = "arrow_r_int" > </span >
<span class = "arrow_r_out" > </span >
CSS制作对话框效果-箭头右
</div >
<div class = "mwt_border" >
<span class = "arrow_b_int" > </span >
<span class = "arrow_b_out" > </span >
CSS制作对话框效果-箭头下
</div >
<div class = "mwt_border" >
<span class = "arrow_l_int" > </span >
<span class = "arrow_l_out" > </span >
CSS制作对话框效果-箭头左
</div >
效果如下:
相关推荐
### DIV和CSS概要摘录知识点解析 #### 一、表格与HTML的局限性 1. **表格渲染问题**:在传统的HTML布局中,浏览器必须下载完整个表格才能将其渲染出来。这意味着用户需要等待较长的时间才能看到内容的一部分,这...
在网页设计中,引用块(Blockquote)是一个非常常见的元素,用于表示文本的引用或摘录。CSS(Cascading Style Sheets)是控制网页样式和布局的重要技术,它允许我们自定义Blockquote的外观和行为。这篇博文将深入...
最后,`脚本之家.txt`很可能是一个文本文件,可能包含脚本之家网站的摘录、文章链接或者是一些CSS代码片段。这种文本资源方便离线阅读和代码收藏,尤其是对于学习和参考特定的CSS技巧和解决方案非常有用。 总之,这...
在核心内容的摘录中,我们可以看到文档的结构分为多个章节,每个章节聚焦于特定的布局技巧和知识点。现在,我将详细地对其中的知识点进行解读和阐述。 ### XHTML和CSS布局基础 文档首先提到了XHTML和CSS布局的基础...
此文档简要摘录了CSS中,常用的属性设置,如背景(background)相关的、字体(font)相关的属性、文本相关的属性以及表格相关的属性
webservice摘录webservice摘录webservice摘录webservice摘录webservice摘录webservice摘录webservice摘录webservice摘录webservice摘录质
- CSS3特性:随着CSS3的推出,新增了许多强大的特性,比如动画、过渡效果、2D/3D转换、边框和阴影效果等,本书应会详细介绍这些特性以及它们的使用技巧。 - 响应式设计:这涉及到如何使用媒体查询、流式布局以及弹性...
从描述中我们可以推测,这份资料可能是从一本关于CSS的专业书籍中摘录出来的,目的是为了帮助读者更好地理解和掌握CSS的各种技术。下面,我们将深入探讨这些标签所涵盖的关键CSS知识点。 首先,CSS是Web设计中不可...
根据提供的内容和描述,这里是一份CSS语法手册的内容摘录。本手册包含了一系列的CSS属性及其用法,下面将详细解释这些知识点。 ### CSS属性详解 #### 1. font-family `font-family` 属性用于定义元素文本的字体...
在旧版浏览器中实现CSS3效果通常需要使用如IE的滤镜技术或者额外的JavaScript库(如CSS3 PIE)来模拟一些效果。 除了CSS3本身的技术内容,书籍还会涉及到版权和商标的相关法律知识。书籍出版社通常会在版权声明中...
在"摘录:Ext Js 简单入门(淡入淡出、波纹效果)"这篇博文中,作者主要介绍了如何利用Ext Js实现两种常见的视觉效果:淡入淡出和波纹效果。下面将详细探讨这两个主题。 **淡入淡出效果** 在网页设计中,淡入淡出效果...
摘录之星的特点包括: 摘录,一步到位:按下一个热键(Ctrl+S,可重新定义)就自动完成内容的命名、保存、归并目录等诸多事项,并且自动记忆其它重要参考信息,如页面网址、摘录时间、应用程序名等。 摘录,一键通:...
CSS选择器可用于过滤生成的摘录。 如何? 该插件贯穿您的所有帖子,如果您的帖子中所包含的直接标签数量超过了配置的数量,则这些摘录将是摘录,否则将使用整个帖子。 配置 您可以通过在配置中设置depth来指定摘录...
从各类电脑报刊摘录的一些经典文摘;qq,msn传送文件的原理比较;u盘启动系统;(不断更新中。。。。)
Linux摘录入门基础 在计算机世界中,Linux操作系统是一个强大且灵活的开源系统,它以其稳定性和安全性赢得了全球用户的喜爱。这份"Linux摘录入门基础"涵盖了Linux的基础知识,包括安装、基本命令、文件系统、用户...
《UML 摘录小结》 UML,全称为Unified Modeling Language,是一种标准化的通用建模语言,主要用于软件开发过程中的系统描述、可视化、构造和文档化。UML的诞生是为了统一Booch、Rumbaugh和Jacobson等人的表示方法,...
网上摘录的比较使用的CSS代码,部分是从外国网站上摘抄的,可以看一下,总共50例,个人感觉还不错!
在这个学习摘录中,你可能会接触以下主题: - 模板实例化和编译期多态 - 依赖类型推导(SFINAE)和模板元编程 - 异常安全编程,包括异常规范(nothrow) - STL容器的内部结构和操作(如容量管理和内存管理) - 迭代...
部分内容摘录部分提到了版权信息,指出Cengage Learning是这本教科书的版权所有者,并且详细列出了版权信息、出版社地址、ISBN编号等,这表明了作品的正式出版状态以及合法销售和使用的授权。还提及了Cengage ...