题目要求用css实现下图效果：

很明显难点就在那个多出去的三角形上，下面代码是用一个div来实现的，用到了伪类 : befor和 : after，使用这两个伪类活生生的在div之前和之后多出了“那么点东西”，然后设置其边框，形成一黑色三角形，在用after造出另一白色三角形，让白色三角形位置向后移动，正好流出黑色三角形边框：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<title>testcss</title>

<style>

#demo{

  width: 100px;

  height:100px;

  border:2px solid #000;

}

#demo:before{

  content:'';

  display: block;

  width: 1px;

  height:1px;

  position: relative;

  top:20px;

  left:100px;

  border-left: 20px solid #000;

  border-top:15px solid transparent;

  border-bottom:15px solid transparent;

}

#demo:after{

  content:'';

  display: block;

  width: 1px;

  height:1px;

  position: relative;

  top:-11px;

  left:97px;

  border-left: 20px solid #fff;

  border-top:15px solid transparent;

  border-bottom:15px solid transparent;

}

</style>

<script type="text/javascript">

window.onload=function(){

}

</script>

</head>

<body>

  <div id='demo'></div>

</body>

</html>

用css伪类实现提示框效果的更多相关文章

  1. div+css实现圆形div以及带箭头提示框效果

    .img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...

  2. css伪类实现文字两侧划线效果

    css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...

  3. CSS伪类before，after制作左右横线中间文字效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  5. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  6. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  7. (五)CSS伪类(Pseudo-class)

    CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...

  8. CSS伪类整理笔记

    0 伪元素 虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果. css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称.用两个冒号::是为了区别伪类和伪元素(CSS2中并没 ...

  9. 关于css伪类，伪元素详解总结

    伪类 伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰.常见的几种伪类是: :link , :visited , :hover , :active , :first-ch ...

随机推荐

  1. 完成端口(Completion Port)详解(转)

    手把手叫你玩转网络编程系列之三    完成端口(Completion Port)详解                                                           ...

  2. CLR via C#深解笔记五 - 事件

    事件处理实际上是一种具有特殊签名的delegate, 像这个样子:public delegate void EventHandler(object sender, EventArgs e);   类型 ...

  3. [转载]在Vmware ESXI中安装群晖Synology DSM 5.0 (4528)

    转载 在Vmware ESXI中安装群晖Synology DSM 5.0 (4528) 文件准备 Vmware ESXi用户安装需要的文件 NB_x64_5032_DSM_50-4528_Xpenol ...

  4. hybrid开发设计

    hybrid方案背景 大部分业务都是在不停改变的,我们希望native不发布新版本就可以让线上用户使用新功能.我们要实现这样的方式,采用h5来实现就可以满足这一要求,准确说是native里提供一个装载 ...

  5. Android样式的开发:Style篇

    前面铺垫了那么多,终于要讲到本系列的终篇,整合所有资源,定义成统一的样式.哪些该定义成统一的样式呢?举几个例子吧: 每个页面标题栏的标题基本会有一样的字体大小.颜色.对齐方式.内间距.外间距等,这就可 ...

  6. 无插件纯Web HTML5 3D机房 终结篇（新增资产管理、动环监控等内容）

    原本以为这次的机房资产管理项目告一段落,可以歇一歇,哥还是太天真了.我们伟大的甲方又拿下了第二期的项目,誓把哥的才华发挥到极致啊.国庆长假也没正经休息几天,硬是给人折腾出了个demo,加上了容量管理. ...

  7. 【cs229-Lecture19】微分动态规划

    内容: 调试强化学习算法(RL算法) LQR线性二次型调节(french动态规划算法) 滤波(kalman filters) 线性二次高斯控制(LGG) Kalman滤波器 卡尔曼滤波(Kalman ...

  8. 使用Html5+C#+微信 开发移动端游戏详细教程 总目录

    (一).序(关于作者创业失败的感想) (二).准备工作&开发环境 (三).使用html5引擎搭建游戏框架 (四).游戏中层的概念与设计 (五).游戏图像的加载与操作 (六).游戏界面布局与性能 ...

  9. 精品素材：WALK & RIDE 单页网站模板下载

    今天,很高兴能向大家分享一个响应式的,简约风格的 HTML5 单页网站模板.Walk & Ride 这款单页网站模板是现代风格的网页模板,简洁干净,像素完美,特别适合用于推广移动 APP 应用 ...

  10. Python+Selenium进行UI自动化测试项目中，常用的小技巧1：读取excel表，转化成字典（dict）输出

    从今天开始我将会把在项目中遇到的问题,以及常用的一些技巧来分享出来,以此来促进自己的学习和提升自己:更加方便我以后的查阅. 现在要说的是:用Python来读取excel表的数据,返回字典(dict), ...