使用css画带气泡的三角形

2018-3-8 Jon html+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>
			    body {
			      margin: 50px;
			    }
			    .bubble {
			      position: relative;
			      border: 1px solid #ccc;
			      width: 150px;
			      height: 120px;
			      border-radius: 5px;
			    }
			    .bubble::before, .bubble::after {
			      content: '';
			      border-left: 12px solid transparent;
			      border-top: 15px solid #ccc;
			      border-right: 12px solid transparent;
			      position: absolute;
			      bottom: -15px;
			      left: 50%;
			      transform: translateX(-50%);
			    }
			    .bubble::after {
			      border-top: 15px solid #fff;
			      bottom: -14px;
			    }
			  </style>
</head><body><div class="bubble"></div></body></html>

您可以修改框中代码后运行查看

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇黄贱人文学作品
上一篇我是如何抢到回家的火车票的

发表评论：

知向前端

使用css画带气泡的三角形

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档