問(wèn)題描述

這樣的下三角氣泡框用純css3如何實(shí)現(xiàn),如圖

問(wèn)題解答

樓上2位的畫(huà)出來(lái)的三角形好像都是純背景色的三角形！這種虛線型的三角形好像真不好畫(huà)！！！如果只是視覺(jué)上的這種效果，小面一個(gè)小的p有2個(gè)虛線邊框在旋轉(zhuǎn)45度絕對(duì)定位到那個(gè)大的虛線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畫(huà)就行

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;…(自己精確一下定位樣式之類的，手機(jī)打的可能中英文標(biāo)點(diǎn)符號(hào)混用，見(jiàn)諒)

｝

利用偽類就好了