`

[摘录]纯CSS打造箭头对话框效果

    博客分类:
  • CSS
CSS 
阅读更多

有在使用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 >

 

 

 

效果如下:

  • 大小: 32.8 KB
  • 大小: 40.7 KB
  • 大小: 18.6 KB
  • 大小: 26.5 KB
  • 大小: 19.5 KB
  • 大小: 21.4 KB
  • 大小: 20.4 KB
  • 大小: 29.4 KB
分享到:
评论

相关推荐

    DIV和CSS概要摘录

    ### DIV和CSS概要摘录知识点解析 #### 一、表格与HTML的局限性 1. **表格渲染问题**:在传统的HTML布局中,浏览器必须下载完整个表格才能将其渲染出来。这意味着用户需要等待较长的时间才能看到内容的一部分,这...

    47 个 惊人的 CSS3 动画示例

    部分内文摘录揭示了文章的结构——一系列具体的CSS3动画实例。每个实例都配有图片,并简短描述了其特点。例如,“CSS3ClockWithjQuery”结合了CSS3与jQuery,创造了一个动态时钟;“3DCubeThatRotatesUsingArrowKeys...

    引用块(Blockquote)CSS效果

    在网页设计中,引用块(Blockquote)是一个非常常见的元素,用于表示文本的引用或摘录。CSS(Cascading Style Sheets)是控制网页样式和布局的重要技术,它允许我们自定义Blockquote的外观和行为。这篇博文将深入...

    css100 文件下载

    最后,`脚本之家.txt`很可能是一个文本文件,可能包含脚本之家网站的摘录、文章链接或者是一些CSS代码片段。这种文本资源方便离线阅读和代码收藏,尤其是对于学习和参考特定的CSS技巧和解决方案非常有用。 总之,这...

    Div+CSS 布局大全.pdf

    在核心内容的摘录中,我们可以看到文档的结构分为多个章节,每个章节聚焦于特定的布局技巧和知识点。现在,我将详细地对其中的知识点进行解读和阐述。 ### XHTML和CSS布局基础 文档首先提到了XHTML和CSS布局的基础...

    CSS相关属性

    此文档简要摘录了CSS中,常用的属性设置,如背景(background)相关的、字体(font)相关的属性、文本相关的属性以及表格相关的属性

    webservice摘录webservice摘录

    webservice摘录webservice摘录webservice摘录webservice摘录webservice摘录webservice摘录webservice摘录webservice摘录webservice摘录质

    CSS Mastery 3rd edition

    - CSS3特性:随着CSS3的推出,新增了许多强大的特性,比如动画、过渡效果、2D/3D转换、边框和阴影效果等,本书应会详细介绍这些特性以及它们的使用技巧。 - 响应式设计:这涉及到如何使用媒体查询、流式布局以及弹性...

    CSS特性源码_01

    从描述中我们可以推测,这份资料可能是从一本关于CSS的专业书籍中摘录出来的,目的是为了帮助读者更好地理解和掌握CSS的各种技术。下面,我们将深入探讨这些标签所涵盖的关键CSS知识点。 首先,CSS是Web设计中不可...

    CSS语法手册(CSS手册)(20211001023802).pdf

    根据提供的内容和描述,这里是一份CSS语法手册的内容摘录。本手册包含了一系列的CSS属性及其用法,下面将详细解释这些知识点。 ### CSS属性详解 #### 1. font-family `font-family` 属性用于定义元素文本的字体...

    CSS3实用指南(英文版)

    在旧版浏览器中实现CSS3效果通常需要使用如IE的滤镜技术或者额外的JavaScript库(如CSS3 PIE)来模拟一些效果。 除了CSS3本身的技术内容,书籍还会涉及到版权和商标的相关法律知识。书籍出版社通常会在版权声明中...

    摘录:Ext Js 简单入门(淡入淡出、波纹效果)

    在"摘录:Ext Js 简单入门(淡入淡出、波纹效果)"这篇博文中,作者主要介绍了如何利用Ext Js实现两种常见的视觉效果:淡入淡出和波纹效果。下面将详细探讨这两个主题。 **淡入淡出效果** 在网页设计中,淡入淡出效果...

    概念图——摘录之星

    摘录之星的特点包括: 摘录,一步到位:按下一个热键(Ctrl+S,可重新定义)就自动完成内容的命名、保存、归并目录等诸多事项,并且自动记忆其它重要参考信息,如页面网址、摘录时间、应用程序名等。 摘录,一键通:...

    hexo-excerpt:Hexo的自动摘录生成器

    CSS选择器可用于过滤生成的摘录。 如何? 该插件贯穿您的所有帖子,如果您的帖子中所包含的直接标签数量超过了配置的数量,则这些摘录将是摘录,否则将使用整个帖子。 配置 您可以通过在配置中设置depth来指定摘录...

    从各类电脑报刊摘录的一些经典文摘

    从各类电脑报刊摘录的一些经典文摘;qq,msn传送文件的原理比较;u盘启动系统;(不断更新中。。。。)

    Linux摘录入门基础

    Linux摘录入门基础 在计算机世界中,Linux操作系统是一个强大且灵活的开源系统,它以其稳定性和安全性赢得了全球用户的喜爱。这份"Linux摘录入门基础"涵盖了Linux的基础知识,包括安装、基本命令、文件系统、用户...

    UML摘录小结.doc

    《UML 摘录小结》 UML,全称为Unified Modeling Language,是一种标准化的通用建模语言,主要用于软件开发过程中的系统描述、可视化、构造和文档化。UML的诞生是为了统一Booch、Rumbaugh和Jacobson等人的表示方法,...

    CSS使用代码50例

    网上摘录的比较使用的CSS代码,部分是从外国网站上摘抄的,可以看一下,总共50例,个人感觉还不错!

    C语言经典问题摘录

    C语言经典问题解析 在C语言的学习与应用过程中,我们经常会遇到一些看似简单却充满陷阱的问题,这些问题往往能深入地考验我们对C语言特性的理解程度。以下是对几个经典问题的详细解答,希望能帮助读者更好地掌握...

    C++学习摘录

    在这个学习摘录中,你可能会接触以下主题: - 模板实例化和编译期多态 - 依赖类型推导(SFINAE)和模板元编程 - 异常安全编程,包括异常规范(nothrow) - STL容器的内部结构和操作(如容量管理和内存管理) - 迭代...

Global site tag (gtag.js) - Google Analytics