這樣的下三角氣泡框用純css3如何實(shí)現(xiàn)
問(wèn)題描述
這樣的下三角氣泡框用純css3如何實(shí)現(xiàn),如圖
問(wèn)題解答
回答1：樓上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;
}
回答2：可以考慮用clip-path
回答3：用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;…(自己精確一下定位樣式之類(lèi)的，手機(jī)打的可能中英文標(biāo)點(diǎn)符號(hào)混用，見(jiàn)諒)
｝
回答5：利用偽類(lèi)就好了
相關(guān)文章：
1. html5 - 有可以一次性把所有 css外部樣式轉(zhuǎn)為html標(biāo)簽內(nèi)style=" "的方法嗎?2. javascript - 如何將一個(gè)div始終固定在某個(gè)位置；無(wú)論屏幕和分辨率怎么變化；div位置始終不變3. html - vue項(xiàng)目中用到了elementUI問(wèn)題4. python - 如何判斷爬蟲(chóng)已經(jīng)成功登陸？5. javascript - 求解答：實(shí)例對(duì)象調(diào)用constructor，此時(shí)constructor內(nèi)的this的指向？6. javascript - 這不是對(duì)象字面量函數(shù)嗎？為什么要new初始化？7. javascript - vscode alt+shift+f 格式化js代碼，通不過(guò)eslint的代碼風(fēng)格檢查怎么辦。。。8. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?9. javascript - [js]為什么畫(huà)布里不出現(xiàn)圖片呢？在線等10. javascript - 有什么比較好的網(wǎng)頁(yè)版shell前端組件？
網(wǎng)公網(wǎng)安備