想要实现的效果如下:

第一步：如何用css画出三角形？

 /* css画三角形 */

 .sanjiao{

     width:;

     border-top:40px solid red;

     border-bottom:40px solid green;

     border-left:40px solid blue;

     border-right:40px solid yellow;

 }

 <div class="sanjiao">

 </div>

如下显示

要显示一个三角形，那么去掉其他三个三角形即可。

如果删掉其他三条边，那剩下的一条边也不会显示，最好是让其他三条边显示透明。

/* css画三角形 */

.sanjiao{

    width:;

    border-width:40px;

    border-style:solid;

    border-color:red transparent transparent transparent; /* transparent 设置边框颜色透明 */

}

<div class="sanjiao">

</div>

如下显示

第二步：如何让三角形紧贴在元素上？

可以定义一个标签，如上画出三角形；也可以用before和after伪元素画出三角形。

利用position定位使得三角形紧贴在元素上的指定位置。

完整代码如下:

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

.wrap{

    margin-top:30px;

    text-align:center;

}

.jiantou{

    display:inline-block;

    padding:10px;

    background:#2E963D;

    color:#FFF;

    border-radius:8px;

    position:relative;

}

/* 下箭头 */

.jiantou:after{

    display:block;

    content:'';

    border-width:8px 8px 8px 8px;

    border-style:solid;

    border-color:#ff4d4d transparent transparent transparent;

    /* 定位 */

    position:absolute;

    left:40%;

    top:100%;

}

/* 上箭头 */

.jiantou:before{

    display:block;

    content:'';

    border-width:8px 8px 8px 8px;

    border-style:solid;

    border-color:transparent transparent #ff4d4d transparent;

    /* 定位 */

    position:absolute;

    left:40%;

    top:-16px;

}

</style>

</head>

<body>

<div class="wrap">

    <span class="jiantou">LIUCHUAN</span>

</div>

</body>

</html>

如第一幅图片

小结：QQ上的聊天窗口中说完话之后，就会有个文字泡，这个文字泡有这个箭头指向头像。如下：

用这种方法可以实现如上文字泡效果。

css伪元素before/after和画三角形的搭配应用的更多相关文章

  1. 用CSS伪元素制作箭头

    现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...

  2. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  3. css 伪元素分享！！！

    最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...

  4. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  5. (六)CSS伪元素

    CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...

  6. CSS 伪元素

    CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...

  7. css伪元素

    CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素  "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...

  8. js如何控制css伪元素内容（before，after）

    曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...

  9. css伪元素用法大全

    本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

随机推荐

  1. 2016"百度之星" - 初赛（Astar Round2A） 1004 D Game 区间DP

    D Game Problem Description   众所周知,度度熊喜欢的字符只有两个:B 和D. 今天,它发明了一个游戏:D游戏. 度度熊的英文并不是很高明,所以这里的D,没什么高深的含义,只 ...

  2. FZU 2183 字符串处理

    Problem Description 现在有一些被简单压缩的字符串,例如:a[120]代表120个a.对于字符串acb[3]d[5]e相对于acbbbddddde 现在给你两个字符串cString, ...

  3. php数组的各种排序

    转自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/10/11/2207494.html 如果你已经使用了一段时间PHP的话,那么,你应 ...

  4. 7.xmpp版即时聊天

    即时聊天的解决方案 socket: xmpp:xmpp+openfire+asmack 环信 常见协议 比较安全,tcp上还加了俩层 简单聊一下socket socket:套接字,连接需要ip和端口, ...

  5. HTTP基础02--HTTP协议简介

    客户端和服务器端: 仅从一条通信路线来说,服务器端和客户端是确定的: HTTP协议规定,通信一定是先从客户端开始建立,服务器端在没有接受到请求之前不会发送响应: 不保存状态: HTTP是无状态协议,对 ...

  6. c#知识总结2

    四.C#类型转换 类型转换就是把一种类型转换成为另一种类型. 隐式类型转换:c#默认的以安全方式进行的转换.例如小整数类型转换为大整数类型.派生类转换为基类 显式类型转换:用户使用的预定义的函数显式完 ...

  7. 初始化lpc2106开发工程

    单片机型号:lpc2106.Init.s:初始化pc指针和sp指针.    AREA    Init, CODE, READONLY    IMPORT  test1_main    EXPORT  ...

  8. BZOJ3165 : [Heoi2013]Segment

    建立线段树,每个节点维护该区间内的最优线段. 插入线段时,在线段树上分裂成$O(\log n)$棵子树,若与当前点的最优线段不相交,那么取较优的,否则暴力递归子树. 查询时在叶子到根路径上所有点的最优 ...

  9. Noi2011 : 智能车比赛

    假设S在T左边,那么只能往右或者上下走 f[i]表示S到i点的最短路 f[i]=min(f[j]+dis(i,j)(i能看到j)) 判断i能看到j就维护一个上凸壳和一个下凸壳 时间复杂度$O(n^2) ...

  10. MathType 插入定义的chapter and section break后无法隐藏

    每一章标题后面插入一个“Next Section Break”,这样定稿后各章文件组合为总文件后,方程编号会自动递增,如果已经插入了默认的“Equation Chapter 1 Section 1”, ...