想要实现的效果如下:

第一步:如何用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. HDU 4342History repeat itself 数学

    C - History repeat itself Time Limit:1000MS     Memory Limit:32768KB      Description Tom took the D ...

  2. loj 1004(dp)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=25830‘ 思路:类似与数塔问题,自底向上处理,输入的时候稍微注意一 ...

  3. MATLAB学习笔记(一)——入门与操作

    (一)简单操作 一.命令行操作 简单的说就跟C语言(更简单来说,就跟手写的一样). 二.变量.数值与表达式 1.变量 (1)命名规则: ①变量名必须以字母开头: ②变量名可以由字母.数字和下画线混合组 ...

  4. C#学习笔记(三)——流程控制

    一.布尔逻辑 1.与布尔有关的2元运算符 2.布尔运算符 PS:“&”与“&&“之类的区别 (1)”&“是按位运算,也就是说是将2个数都转换成2进制,然后逐个进行与操作 ...

  5. 安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情(五)

    25. 安装 Linux Malware Detect (LMD) Linux Malware Detect (LMD) 是 GNU GPLv2 协议下发布的开源 Linux 恶意程序扫描器,它是特别 ...

  6. [LintCode] Word Break

    Given a string s and a dictionary of words dict, determine if s can be break into a space-separated ...

  7. Revit二次开发示例:ErrorHandling

    本示例介绍了Revit的错误处理.   #region Namespaces using System; using System.Collections.Generic; using Autodes ...

  8. Robotium Table控件的处理

    HTML代码: <html> <head> <title>Table</title> </head> <body> <ta ...

  9. object-c 要理解协议的几个重要概念

    协议的声明/定义 调用协议 设置委托 协议的实现

  10. 基于nginx tomcat redis分布式web应用的session共享配置

    一.前言 nginx 作为目前最流行的开源反向代理HTTP Server,用于实现资源缓存.web server负载均衡等功能,由于其轻量级.高性能.高可靠等特点在互联网项目中有着非常普遍的应用,相关 ...