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

Question

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

Answer 1

樓上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;

}

Answer 2

可以考慮用clip-path

Answer 3

用Border畫就行

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

Answer 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;
…
(自己精確一下定位樣式之類的，手機打的可能中英文標點符號混用，見諒)

｝

Answer 5

利用偽類就好了