Css--深入学习之三角形气泡窗
本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:【css进阶】伪元素的妙用--单标签之美,奇思妙想
一、三角形的实现
首先,先画了三角形,后面二、三都是根据这个 衍生而来的。
第一步,Css,很简单border就可以实现了,下面就是一个三角形的css
article{ float:left; margin-left:80px; }
.Triangle{
width:0px;
border:100px solid transparent;
border-top-color:#00aabb;
}
第二步,Html
然后想要实现左三角,在三角形的css基础上,加一个 border-right:0;
右三角,加一个 border-left:0;
<article>
<h3>一、三角形</h3>
<div class="Triangle"></div>
</article>
<article>
<h5>二、左三角形</h5>
<div class="Triangle" style="border-right:0;"></div>
</article>
<article>
<h5>三、右三角形</h5>
<div class="Triangle" style="border-left:0;"></div>
</article>
最后,有什么用呢,可以做对话框或气泡框一类的东西啦!比如说:
同样道理,其实就是一个带圆角的矩形与三角形拼接而成的罢了,所以只用写好第一个三角气泡,后面就是根据他衍生出来的而已
第一步,Css
先建立一个带圆角的矩形,这个就不用教了,有点基础的都会
后面就是利用为元素:after来为圆角矩形添加小三角了,然后小三角根据圆角矩形去定位就OK了,
/*气泡矩形*/
.ract{
position:position;
width:260px;
height:120px;
background-color:#0094ff;
border-radius:10px;
} /*三角气泡*/
.TrBubble:after{
content:"";
position:absolute;
bottom:;
left:50%;
border:34px solid transparent;
border-top-color:#0094ff;
border-bottom:;
margin:0 0 -34px -34px;
} /*左三角气泡*/
.LeftBubble:after{
content:"";
position:absolute;
bottom:;
left:50%;
border:34px solid transparent;
border-top-color:#0094ff;
border-bottom:;
margin:0 0 -34px -34px;
border-left:;
} /*右三角气泡*/
.RightBubble:after{
content:"";
position:absolute;
bottom:;
left:50%;
border:34px solid transparent;
border-top-color:#0094ff;
border-bottom:;
margin:0 0 -34px -34px;
border-right:;
}
第二步,Html
<article>
<section>
<h3>一、三角气泡</h3>
<div class="ract TrBubble"></div>
</section>
<section>
<h5>二、左三角气泡</h5>
<div class="ract LeftBubble"></div>
</section>
<section>
<h5>三、右三角气泡</h5>
<div class="ract RightBubble"></div>
</section>
</article>
Css--深入学习之三角形气泡窗的更多相关文章
- CSS三角形/气泡的实现原理及应用
记得第一次面试,面试官问如何用css实现一个不规则三角形?好叭 ·-·,触及到知识盲区了,手动叹气(╥﹏╥),好在别的回答的还好,没挂
- CSS入门级学习
css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- HTML: 用CSS畫一個三角形
代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
- WebGL学习(1) - 三角形
原文地址:WebGL学习(1) - 三角形 还记得第一次看到canvas的粒子特效的时候,真的把我给惊艳到了,原来在浏览器也能做出这么棒的效果.结合<HTML5 Canvas核心技术>和网 ...
- css中border画三角形
<!doctype html><html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS 3 学习笔记
css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal: 控制连续文本换行.break-word: 内容将在边界内换行.如果需要,词 ...
- 用css做出来一个三角形
用css做出来一个三角形 <!--不设置宽高 转换行内块 边线设置成宽度--> <div class="triangle"> 三角 ...
随机推荐
- Android开发学习——android体系结构
Android的体系结构采用了分层架构的思想, 从上层到底层共包括四层,分别是应用程序程序层.应用框架层.系统库和Android运行时和Linux内核. 一 应用程序层 该层提供一些核心应用程序包,例 ...
- iOS---设置输入框的光标位置
//这里设置光标位置,让光标位置后移10 textField.leftView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 10, 0)]; tex ...
- oc 中组合排序算法
- (NSMutableArray *)zuHeSuanFa:(NSMutableArray *)array chooseCount:(int)m { int n = (int)[array coun ...
- Blogging with github Pages
参考: 阮大大:搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门 使用BitBucket和FTPloy私有Jekyll源码 http://www.pchou.inf ...
- linux 学习随笔-压缩和解压缩
.gz 由gzip压缩工具压缩的文件 .bz2 由bzip2压缩工具压缩的文件 .tar 由tar打包程序打包的文件 .tar.gz 先由tar打包,gzip压缩 .tar.bz2 先由tar打包,b ...
- MySQL备份还原——AutoMySQLBackup介绍
AutoMySQLBackup是一个开源的MySQL备份脚本.可以说它是一个轻量级的备份方案,AutoMySQLBackup的安装.配置非常简单.方便.AutoMySQLBackup的sourcefo ...
- 新书出版《.NET框架设计—模式、配置、工具》感恩回馈社区!
很高兴我的第一本书由图灵出版社出版.本书总结了我这些年来对框架学习.研究的总结,里面纯干货,无半句废话. 书的详情请看互动网的销售页面:http://product.china-pub.com/377 ...
- .NET/ASP.NET MVC Controller 控制器(深入解析控制器运行原理)
阅读目录: 1.开篇介绍 2.ASP.NETMVC Controller 控制器的入口(Controller的执行流程) 3.ASP.NETMVC Controller 控制器的入口(Controll ...
- 我心中的MySQL DBA
原文网址链接:http://wangwei007.blog.51cto.com/68019/1718311 MySQL是一个跨平台的开源关系型数据库管理系统,目前MySQL被广泛地应用在Interne ...
- WIN 下的超动态菜单(三)代码
WIN 下的超动态菜单(一)简介 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/ 超动态 ...