CSS纯样式实现箭头、对话框等形状
在使用第三方框架bootstrap的时候，本以为其是图片实现的小箭头，后来使用开发工具查看是用CSS来实现的，现记录如下：
之前都没仔细去观注过其原理，都是拿来使用，在实现小箭头之前需要了解下CSS的before跟after伪类的用法，这个链接有详细说明http://www.webhek.com/understanding-pseudo-element-before-and-after
理解完上面伪类的用法后，下面进入主题，直接贴上代码，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border test page</title>
<style>
body{background: #fff;} .borderbottom{
width:0px;
height: 0px;
border-width: 8px;
border-style: solid;
border-color: transparent transparent #333 transparent;
position: absolute;
top: 10px;
}
.borderballoon{
width: 200px;
height: 80px;
background: lightgreen;
border-radius: 5px;
position: relative;
top: 30px;
}
.borderballoon:after{
content: "";
position: absolute;
border-style: solid;
border-color: lightgreen transparent transparent;
border-width: 10px;
bottom: -20px;
right:40px;
}
.flatballoon{
width: 200px;
height: 100px;
border: 1px solid #ccc;
border-radius: 5px;
position: relative;
top: 60px
}
.flatballoon:after{
content: "";
position: absolute;
border-style: solid;
border-color: #ccc transparent transparent;
border-width: 10px;
bottom: -20px;
right:40px;
}
.flatballoon:before{
content: "";
position: absolute;
border-style: solid;
border-color: white transparent transparent;
border-width: 10px;
bottom: -19px;
right:40px;
z-index: 9;
} </style>
</head>
<body> <div class="borderbottom"></div>
<div class="borderballoon"></div>
<div class="flatballoon"></div> </body>
</html>
主要是定位结合伪类实现其效果。
CSS纯样式实现箭头、对话框等形状的更多相关文章
- css纯样式导航
<style>.dropdown { position: relative; display: inline-block;} .dropdown-content { di ...
- 纯CSS实现各类气球泡泡对话框效果
原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...
- 纯css写带小三角对话框
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...
- 纯CSS菜单样式，及其Shadow DOM，Json接口 实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...
- html css鼠标样式，鼠标形状
css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...
- css 字体样式设置大全
css样式大全(整理版) 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...
- css初始化样式代码
为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
随机推荐
- 计数排序 + 线段树优化 --- Codeforces 558E : A Simple Task
E. A Simple Task Problem's Link: http://codeforces.com/problemset/problem/558/E Mean: 给定一个字符串,有q次操作, ...
- Vs2012出现停止工作问题的解决方法
我的VS2012总是出现问题,打开项目会,更改移动控件位置也会,后来在网上找到了解决方法 这是出现问题
- 不可或缺 Windows Native (4) - C 语言: 预处理命令，输入，输出
[源码下载] 不可或缺 Windows Native (4) - C 语言: 预处理命令,输入,输出 作者:webabcd 介绍不可或缺 Windows Native 之 C 语言 预处理命令 输入 ...
- 重新想象 Windows 8.1 Store Apps (76) - 新增控件: SearchBox
[源码下载] 重新想象 Windows 8.1 Store Apps (76) - 新增控件: SearchBox 作者:webabcd 介绍重新想象 Windows 8.1 Store Apps 之 ...
- C# 发邮件
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- java四大域总结
最近学完了web部分,发现有些地方总是单个容易理解,可是把所有的放在一起来大杂烩,总是有那么几个知识点容易混淆.其实网上的资料已经够多了,虽然也不乏辛劳的搬运工.可是最终的目的不就是要我们自身理解吗? ...
- ahjesus 让Boot Camp支持创建win7 u盘安装盘
通过修改BootCamp助理成功创建USB的windows7的安装盘. 以下将方法共享出来. 准备工作: 找到自己电脑的Boot Rom 版本.(点左上角那个小苹果标志 然后点 [关于本机] 然后点 ...
- C# 循环语句 for循环
循环:反复执行某段代码. 循环四要素:初始条件,循环条件,循环体,状态改变.for(初始条件;循环条件;状态改变){ 循环体} 给出初始条件,先判断是否满足循环条件,如果不满足条件则跳过for语句,如 ...
- JS数组的forEach方法(兼容所有浏览器)
//->自己在内置类的原型上扩展一个myForEach来处理forEach不兼容的问题//callBack:回调函数,遍历数组中的一项,就要执行一次callBack//context:改变cal ...
- ArcGIS10.2下调试10.1的程序
听说:10.2比10.1好,诚然,安装了10.2打开一看是这样的,以为是下载的版本问题,后来才以现是显示设置的问题. 因为,我使用的两个显示器,屏幕有点大,所以,就改成中等了,不然怎么可截取下面的截图 ...