这样的下三角气泡框用纯css3如何实现

查看:72
本文介绍了这样的下三角气泡框用纯css3如何实现的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

这样的下三角气泡框用纯css3如何实现,如图

解决方案

楼上2位的画出来的三角形好像都是纯背景色的三角形!
这种虚线型的三角形好像真不好画!!!
如果只是视觉上的这种效果,小面一个小的div有2个虚线边框在旋转45度绝对定位到那个大的虚线DIV上即可如:
.d1{

position: relative;
border: 1px dashed #999;
background: #fff;
width: 150px;
height: 100px;

}
.d1 span{

display: block;
width: 20px;
height: 20px;
position: absolute;
border-right:1px dashed #999;
border-bottom:1px dashed #999;
transform: rotate(45deg);
bottom: -10px;
left: 50%;
margin-left:-15px;
background: #fff;
z-index: 99;

}

这篇关于这样的下三角气泡框用纯css3如何实现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆