成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置:首頁技術文章
文章詳情頁

這樣的下三角氣泡框用純css3如何實現

瀏覽:110日期:2023-06-29 17:39:46

問題描述

這樣的下三角氣泡框用純css3如何實現,如圖這樣的下三角氣泡框用純css3如何實現

問題解答

回答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;

}

回答2:

可以考慮用clip-path

回答3:

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

回答5:

利用偽類就好了

標簽: CSS
相關文章: