css实现气泡框小尾巴

需求描述

编写web聊天工具时，聊天的样式一般会有一个三角形或者小尾巴，这时有2种解决方案，一是采用图片格式，另一种采用css实现。这里介绍css的实现方式。

尾巴样式实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {position: relative;margin: 300px 300px;}.top {width: 224px;height: 200px;position: absolute;top: -101px;left: 38px;border-top-left-radius: 300px 200px;background-color: #fff;border-left: 1px solid red;transform: rotate(-138deg);-webkit-transform: rotate(-138deg);-ms-transform: rotate(-138deg);-moz-transform: rotate(-138deg);-o-transform: rotate(-138deg);z-index: 9;}.bottom {width: 300px;height: 200px;position: absolute;border-bottom-left-radius: 300px 200px;background-color: pink;border-bottom: 1px solid blue;}</style>
</head>
<body><div class="box"><span class="top"></span><span class="bottom"></span></div>
</body>
</html>

效果图：

由图中可以看到在左边尖端的线条颜色变浅，不过等比例缩小后不明显。因为样式中使用了transform，所以要使用兼容写法，只能支持IE9以上。

三角形样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.arrow{display: inline-block;border-top: 200px solid black;border-left: 100px solid pink;border-right: 50px solid blue;}</style>
</head>
<body><span class="arrow"></span>
</body>
</html>

效果图：

需要箭头朝哪个方向的三角形就设置那个方向以及它两边的border。比如例子中需要黑色的朝下的箭头就设置border-top以及两边的border-left、border-right。将两边的颜色设置为transparent就可以隐藏掉颜色，调整border宽度可以设置大小形状。

css实现气泡框小尾巴相关推荐

[css] 使用css实现气泡框的效果
[css] 使用css实现气泡框的效果 <!DOCTYPE html> <html lang="en"><head> <meta char ...
纯CSS实现提示框小三角
注:IE6不支持边框transparent,当设置成透明时显示为黑色.而当border-style为dotted或dashed时,点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上(heig ...
css制作tips提示框，气泡框，制作三角形
有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...
html怎么制作气泡,制作CSS气泡框
气泡状文本框,是一种很生动的网页设计手段. 它可以用来表示用户的发言. 也可以用来作为特定信息的提示符. DVD租借网站Netflix,还用它显示碟片的详细信息. ================== ...
纯CSS气泡框实现方法探究
气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...
纯CSS 绘制三角形气泡框
1.用纯css绘制带三角型的气泡框,不适合用图片 2.绘制的原理:当width和height均为0时,bord不为0时,边界交换处以45度角平分. 例子:先画一个三角吧 .dr{width:0px; ...
纯CSS实现气泡聊天框的方法
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
纯CSS实现一个气泡框
实现原理:主要通过CSS的border-color属性,结合::before.::after和position: absolute实现. (1)画一个正方形或长方形的盒子,别忘记此盒子需加上posit ...
试用php语言写气泡,如何用纯CSS实现语音聊天气泡框效果
本篇文章主要给大家介绍怎么用纯css实现语音聊天气泡框效果. 推荐参考教程:<CSS教程> 语音聊天气泡框效果,在我们日常生活中或者社交网站上,都是非常常见且流行的一种对话框效果. 比如微 ...

css实现气泡框小尾巴

需求描述

尾巴样式实现

三角形样式

css实现气泡框小尾巴相关推荐

最新文章

热门文章