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

问题描述

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

问题解答

楼上2位的画出来的三角形好像都是纯背景色的三角形！这种虚线型的三角形好像真不好画！！！如果只是视觉上的这种效果，小面一个小的p有2个虚线边框在旋转45度绝对定位到那个大的虚线p上即可如：.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;

}

可以考虑用clip-path

用Border画就行

p:after{ content:’’;border:20px solid transparent;border-top-color:#fff;position:absolute;left:50%;margin-left:-20px;width:0;}回答4：

利用微元素:after｛content:‘’;with:0;height:0;boreder-left:20px dotted transparent;border-right:20px dotted transparent;border-bottom:40px dotted #ddd;position:absolute;bottom:0;…(自己精确一下定位样式之类的，手机打的可能中英文标点符号混用，见谅)

｝

利用伪类就好了