css实现聊天气泡以及形状--边框法

最新推荐文章于 2024-07-14 14:29:26 发布

maybe28

最新推荐文章于 2024-07-14 14:29:26 发布

阅读量1.9k

点赞数 1

分类专栏： css

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现以下的效果可以利用css的border属性：

首先：我们给一个元素四周都加上边框的话，

.box{width: 10px;height: 10px;border: 10px solid;border-color: #f00 #0f0 #00f #0ff;}

形状为：

因此：生成一个三角形的css就可以写成为：

.box{width: 0;height: 0;border: 10px solid;border-color: #f30 transparent transparent transparent;}

下面就开始写一个带有边角的气泡聊天框了：

<!DOCTYPE html>

<html>

<head>

.box{width: 300px;padding: 30px 20px;position: relative;margin-left: 100px;background: #0000FF;}

.box span{width: 0;height: 0;position: absolute;overflow: hidden;font-size: 0;}

.box span.bot{border-width: 20px;border-style: solid;border-color: #fff #0000FF #0000FF #fff;left: -40px;top: 40px;}

.box span.top{border-width:10px 20px;border-style: dashed solid solid dashed;border-color: transparent #fff #fff transparent;left: -40px;top: 60px;}

</style>

</head>

<body>

第一个气泡……

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

.box{width: 300px;padding: 30px 20px;position: relative;margin-left: 100px;border: 5px solid #00FFFF;}

.box span{width: 0;height: 0;position: absolute;overflow: hidden;font-size: 0;}

.box .bot{border-width: 20px;border-style: solid dashed dashed;border-color: #0ff transparent transparent;left: 80px;bottom: -40px;}

.box .top{border-width: 20px;border-style: solid dashed dashed;border-color: #fff transparent transparent;left: 80px;bottom: -35px;}

</style>

</head>

<body>

第一个气泡……

</div>

</body>

</html>

其实这个主要是利用颜色进行的遮盖

maybe28

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录