题目要求用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. url rewrite

    http://www.microsoft.com/taiwan/technet/iis/expand/URLRewrite.aspx http://www.iis.net/learn/extensio ...

  2. Android 自定义Drawable

    1.使用BitmapShader实现图片圆角 public class CornerDrawable extends Drawable { private Paint mPaint; private ...

  3. ubuntu14.04使用IceGridAdmin图形界面

    打开网页: http://www.rpmfind.net/linux/RPM/index.html输入搜索: icegrid-gui下载文件: icegrid-gui-3.5.1-2.mga4.x86 ...

  4. Linux sed Examples--转载

    原文地址:https://www.systemcodegeeks.com/shell-scripting/bash/linux-sed-examples/?ref=dzone Sed is basic ...

  5. read和write函数

    读函数read  ssize_t read(int fd,void *buf,size_t nbyte)  如果是ECONNREST表示网络连接出了问题. 写函数write  ssize_t writ ...

  6. [git]用pelican搞一个自己的blog(已完成）

    pelican Pelican Static Site Generator, Powered by Python:Pelican是python语言写的静态网站生成器.因为我一直打算用github pa ...

  7. Flask模板_学习笔记

    代码尽在我的github上面:https://github.com/521xueweihan 概述:    在Flask中,Jinja2默认配置如下:        A.扩展名为.html,.htm, ...

  8. 自增长的聚集键值不会扩展（scale）

    如何选择聚集键值的最佳实践是什么?一个好的聚集键值应该有下列属性: 范围小的(Narrow) 静态的(Static) 自增长的(Ever Increasing) 我们来具体看下所有这3个属性,还有在S ...

  9. ASP.NET MVC和WebForm 轻松实现前端和后端的双重验证 jquery.validate+ValidationSugar

    上次不足的改进 可能上一个贴子给大家带来很多误解,所以我这次把DEMO完善了两个版本 [ASP.NET WEBFROM]和[ ASP.NET MVC] 修改了一些BUG,并且修改了一些细了 在上个贴子 ...

  10. 深入浅出 JavaScript 中的 this

    在 Java 等面向对象的语言中,this 关键字的含义是明确且具体的,即指代当前对象.一般在编译期确定下来,或称为编译期绑定.而在 JavaScript 中,this 是动态绑定,或称为运行期绑定的 ...